【问题标题】：How to make YouTube and Vimeo Videos Responsive? [closed]如何使 YouTube 和 Vimeo 视频具有响应性？ [关闭]
【发布时间】：2016-12-08 16:25:15
【问题描述】：

我想让来自 youtube 和 vimeo 的嵌入式视频具有响应性。

【问题讨论】：

标签： jquery html css iframe

【解决方案1】：

响应式 YouTube 和 Vimeo 视频

1。获取 Vimeo 嵌入代码

<iframe width="420" height="315" src="https://vimeo.com/176291464" frameborder="0" allowfullscreen></iframe>

2。使用嵌入代码

<iframe width="420" height="315" src="https://vimeo.com/176291464" frameborder="0" allowfullscreen></iframe>

3.修改嵌入代码

<div class="video-responsive">
    <iframe width="420" height="315" src="https://vimeo.com/176291464" frameborder="0" allowfullscreen></iframe>
</div>

添加 CSS

.video-responsive{
    overflow:hidden;
    padding-bottom:56.25%;
    position:relative;
    height:0;
}
.video-responsive iframe{
    left:0;
    top:0;
    height:100%;
    width:100%;
    position:absolute;
}

【讨论】：

【解决方案2】：

试试下面的代码：

.embed-container { 
position: relative;  
padding-bottom: 56.25%;
height: 0; 
overflow: hidden; 
max-width: 100%; 
height: auto; 
} 
.embed-container iframe, .embed-container object, .embed-container embed { 
position: absolute; 
top: 0; 
left: 0; 
width: 100%; 
height: 100%; 
}

  &lt;div class='embed-container'&gt;&lt;iframe src='https://player.vimeo.com/video/11712103' frameborder='0' webkitAllowFullScreen mozallowfullscreen allowFullScreen&gt;&lt;/iframe&gt;&lt;/div&gt;

【讨论】：