如何使这个 youtube 视频响应？答案

【问题标题】：How to make this you tube video responsive?如何使这个 youtube 视频响应？
【发布时间】：2015-10-01 07:48:00
【问题描述】：

我有一个包装好的你管视频。

<div class="featured_video_plus">
    <iframe width="730" height="435" frameborder="0" id="fvpyt234171" type="text/html" src="youtubesourcefile"></iframe>
</div>

当我输入以下 CSS 代码时，这个视频是响应式的。

/*** You tube video ***/
.featured_video_plus { position: relative; padding-bottom: 56.25%; /* 16:9 */ padding-top: 25px; height: 0; width: auto;}
.featured_video_plus iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

但是当包装器在另一个DIV 中时它没有响应。我在某些地方也有此代码：

<div class="utube-wrapper" style="width: 730px; margin: 0px 33px 32px 0px; float: left;">
    <!-- Featured Video Plus v1.9-->
    <div class="featured_video_plus">
        <iframe width="730" height="435" frameborder="0" id="fvpyt233458" type="text/html" src="youtubesourcefile"></iframe>
    </div>
</div>

当它也在 div utube-wrapper 中时，我怎样才能让这个你管视频响应？

我也尝试过以下代码..但不起作用。

/*** You tube video ***/
.featured_video_plus { position: relative; padding-bottom: 56.25%; /* 16:9 */ padding-top: 25px; height: 0; width: auto;}
.featured_video_plus iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.utube-wrapper { position: relative; padding-bottom: 56.25%; /* 16:9 */ padding-top: 25px; height: 0; width: auto;}
.utube-wrapper iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

【问题讨论】：

标签： html css iframe responsive-design youtube

【解决方案1】：

只需取出 -> 宽度 730px 并从 utube-wrapper 向左浮动

【讨论】：

【解决方案2】：

一种可能的解决方案：

// CSS & HTML

.center-block-horiz {
  margin-left: auto;
  margin-right: auto;
}
.border-5px-inset-4f4f4f {
  border: 5px inset #4f4f4f;
}
.set-padding {
  padding: 30px;
}

.responsive-wrapper {
  position: relative;
  height: 0;    /* gets height from padding-bottom */
  /* put following styles (necessary for overflow and scrolling handling on mobile devices) inline in .responsive-wrapper around iframe   because not stable in CSS:
    -webkit-overflow-scrolling: touch; overflow: auto; */
}

.responsive-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

#Iframe-Maison-Willem-Tell {
  max-width: 80%;
  max-height: 300px;
  overflow: hidden;
}

/* padding-bottom = h/w as % -- set aspect ratio */
.responsive-wrapper-wxh-600x480 {
  padding-bottom: 80%;
}  


<!-- embed responsive iframe --> 
<div class="set-padding border-5px-inset-4f4f4f">
<div id="Iframe-Maison-Willem-Tell" 
     class="border-5px-inset-4f4f4f center-block-horiz">
  <div class="responsive-wrapper 
     responsive-wrapper-wxh-600x480"
     style="-webkit-overflow-scrolling: touch; overflow: auto;">
<!-- style overflow and overflow-scrolling inline because not
     stable in CSS -->
    <iframe src="http://maisonwillemtell.be">  
      <p style="font-size: 110%;"><em><strong>IFRAME: </strong>  
There is iframe content being displayed  
 here but your browser version does not support iframes. </em>  
Please update your browser to its most recent version  
 and try again.</p>  
    </iframe>
  </div>
</div>
</div>

结果可以在PenResponsive Iframe - Base Code中看到。

标记和 CSS 及其背后的原理取自 How to Make Responsive Iframes — it’s easy! 和 Scaling iframes for responsive design CSS-only。

一个重点是从<iframe> 标记中删除all 样式。仅使用 CSS 设置样式，溢出滚动和溢出除外，它们在 <iframe> 周围的 <div> 包装器中内联样式。另一点是在 .responsive-wrapper 周围的 <div> 包装器中设置 max-width 和 max-height 来设置宽度和高度。

最外面的<div>不是必须的；它只是用来显示填充和边框的效果。

要将 iframe 定位到左侧，您可以使用弹性框而不是浮动。

【讨论】：