引导 iframe 未调整大小答案

【问题标题】：bootstrap iframe not resizing引导 iframe 未调整大小
【发布时间】：2017-11-22 18:02:39
【问题描述】：

除了 YouTube 播放器的大小之外，以下代码运行良好。我无法将其调整为我想要的大小。

我尝试将 width="150" 和 height="100" 放入 iframe，但没有任何反应。

<div class="embed-responsive embed-responsive-16by9">
    <iframe class="embed-responsive-item"  
        src="https://www.youtube.com/embed/q6xWV-uDl5E?autoplay=1" allowfullscreen>
    </iframe>
</div>

【问题讨论】：

标签： html iframe youtube

【解决方案1】：

适合我吗？这是证明这一点的jsfiddle。我也相信你可能会错过px 这就是为什么它不适合你。

JsFiddle

这里是代码：

<div class="embed-responsive embed-responsive-16by9">
   <iframe class="embed-responsive-item"  
   src="https://www.youtube.com/embed/q6xWV-uDl5E?autoplay=1" width=150px 
   height=100px allowfullscreen>
</iframe>
</div>

【讨论】：

【解决方案2】：

如果你只写成宽度=“150”高度=“100”，它并不重要，它工作得很好，如果你不传递像素而不是默认情况下它会到达像素。你想要的尺寸没有得到因为 class="embed-responsive embed-responsive-16by9" 所以它使用 16by9，它是它使用的纵横比，你也可以传递其他比率，例如 1by1 、 21by9、 4by3等

youTube 视频：width="560" height="315"，比例为 16:9 width="640" height="498"，比例为4:3 不同的比例高度和宽度是不同的，您可以根据比例设置不同的宽度和高度来调整它

【讨论】：

是的，我试过这些，但我找不到我想要的尺寸！有什么办法可以设置我自己的高度和宽度？

【解决方案3】：

如果你想要根据你的宽度和高度的大小而不是删除 class="embed-responsive embed-responsive-16by9" 并在你的 iframe 标签中添加你想要的宽度和高度像 [[ src="http://www.youtube.com/embed/4aQwT3n2c1Q" height="315" width="560" allowfullscreen="" frameborder="0"]] 并关闭 iframe 标签，工作正常。

【讨论】：

我试过了，它可以正常工作，但现在我丢失了存储库。我想要的是响应视频以及我的高度和宽度！非常感谢您的帮助！

【解决方案4】：

{div class="响应嵌入"} {iframe width="420" height="315" src="https://www.youtube.com/embed/mM5_T-F1Yn4" frameborder="0" allowfullscreen }{/iframe} {div} 试试这个，你会得到你的答案，我们使用开放的尖括号而不是卷曲

【讨论】：

【解决方案5】：

<div class="wrapper">
       <div class="container">
           <iframe src="there is path of your iframe"></iframe> 
       </div>
   </div>


   .wrapper {
    width: 50%;
   }
.container {
    height: 0;
    width: 100%;
    padding-bottom: 50%;
    overflow: hidden;
    position: relative;
}
.container iframe {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    position: absolute;
}

【讨论】：