Question

除了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>

Answer 1

适合我吗？这是证明这一点的方法。我也相信你可能会遗漏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>

Answer 2

如果你只写宽度=“150”高度=“100”，px无关紧要，它可以正常工作，如果你没有传递px而不是默认它会到达像素。你想要的大小是没有在class =“embed-responsive embed-responsive-16by9”中得到的，所以它使用16by9，它是你使用的宽高比，你也可以通过其他比例，如1by1,21by9,4by3等等

此处为youTube视频：width =“560”height =“315”，比例为16：9 width =“640”height =“498”，比例为4：3 对于不同比例的高度和宽度不同，您可以通过根据比率设置不同的宽度和高度来调整它

Answer 3

如果你想要根据你的宽度和高度大小而不是删除class =＆＃34; embed-responsive embed-responsive-16by9＆＃34;并在iframe标记内添加宽度和高度喜欢[[src =＆＃34; http：//www.youtube.com/embed/4aQwT3n2c1Q"高度=＆＃34; 315＆＃34;宽度=＆＃34; 560＆＃34;的allowFullScreen =＆＃34;＆＃34; FRAMEBORDER =＆＃34; 0＆＃34;]] 并关闭iframe标记，工作正常。

Answer 4

{div class =“responsive-embed”} {iframe width =“420”height =“315”src =“https://www.youtube.com/embed/mM5_T-F1Yn4”frameborder =“0”allowfullscreen} {/ iframe} {} DIV 尝试这个，你让你的回答使用开放角括号而不是卷曲

Answer 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;
}

bootstrap iframe没有调整大小

5 个答案: