问题在bootstrap中将大小设置为响应式iframe

是否可以在引导程序中将大小设置为帧内？

我像这样设置iframe：

<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="…"></iframe>
</div>

我尝试将最大高度设置为450像素：

.embed-responsive {
   max-height:450px;
}

这根本没有效果。你能给我一个提示，怎么能实现一个更小但仍然响应的iframe？

7499

2017-12-09 17:24

起源

您是否尝试过额外设置iframe的高度？ .embed-responsive iframe { height:100%; }。 - Marcelo

这适用于iframe和嵌入式视频： .embed-responsive, .embed-responsive iframe, .embed-responsive-16by9, .embed-responsive-item { max-width: 800px; max-height:450px; } 但周围的div保持100％的高度，所以我在iframe下面有一个巨大的空白区域。 - Dominik Stürzer

我开了一个新的 <div style="video-max-size"> 整个事情。它被定义为： .video-max-size { max-width: 800px; max-height:450px; } 这对我有用。 - Dominik Stürzer

答案:

我有同样的问题并通过在.embed-responsive div周围添加一行和col-sm-8（根据你想要的大小）来解决它。

<div class="row">
  <div class="col-sm-8">
    <div class="bs-example" data-example-id="responsive-embed-16by9-iframe-youtube">
      <div class="embed-responsive embed-responsive-16by9">
        <iframe class="embed-responsive-item" src="" allowfullscreen=""></iframe>
      </div>
    </div>
  </div>
</div>

2018-01-12 13:38

这真是一个好主意。我想我也可以在其他场合使用它。谢谢！ - Dominik Stürzer

我是Bootstrap的新手，但不是总是应该添加到12行？ - Kyle Hawk

是的，虽然它在我在这里提供的示例中有效。为了更加语义正确，你可以在col-sm-8关闭后添加一个<div class =“col-sm-4”>。您可以查看shoelace.io以了解cols的行为方式。 - Lxske

它将仅控制视频的宽度。高度怎么样？高度将保持很大且不成比例。 - hassan

在这里有一个拼写错误 class 这里： <div class="bs-example" data-example-id="responsive-embed-16by9-iframe-youtube"> - candlejack

热门问题

不使用eval / new函数的JavaScript模板库当涉及内部类时，Java继承如何工作 .NET Windows服务的奇怪问题在.ipa或.app下查找App ID 快速入门XSLT参考[关闭] 如何找出Android应用程序中未使用的资源 Ruby中并发的同步方法[重复] 将std :: chrono :: system_clock :: time_point转换为struct timeval并返回 Google Drive API V3（javascript）更新文件内容 Bootstrap 3.0 - 将元素推到底部受密码保护的.NET ClickOnce部署？如何用postgresql安装wordpress coq Set或Type如何成为命题硒滚动元素进入（中心）视图在Spring Transaction JUnit测试中自动装配Hibernate会话的正确方法 Git的Dockerfile策略如何在FOS_PICKFOLDER中使用IFileDialog，同时仍在对话框中显示文件名在Firefox扩展中复制Google Chrome浏览器操作弹出效果 CakePHP找到MAX 芹菜 - 完成任务的召唤功能从使用fmemopen创建的流中读取宽字符 .NET是否为每个程序集创建一个字符串实习池？ DefaultModelBinder不绑定嵌套模型 Navigator.MediaDevices.getUserMedia（）使用了哪些相机通信标准？选择命名空间名称时应该知道什么？ cout Swagger Codegen CLI Java客户端 - 如何正确使用它一个很好的哈希函数用于采访整数，字符串？ Maven 3 ciManagement配置的目的是什么？如何通过语言文化获取代码页？

问题 在bootstrap中将大小设置为响应式iframe

答案:

热门问题

问题在bootstrap中将大小设置为响应式iframe