不希望iframe在759px后占100%宽度

Question

我对 YouTube iframe 视频有疑问。我希望 iframe 占据页面的 100% 宽度并在移动设备上保持纵横比。我不希望视频大于其 560 宽度或 315 高度。然后我希望这 2 个视频在平板电脑和桌面上以内联块方式显示。我希望 iframe 在平板电脑和台式机上并排显示。我似乎无法弄清楚这一点。我对此进行了详尽的搜索，但找不到有效的答案。这是我的代码。

HTML

<div class="video_responsive">
 <div class="video-container">
  <iframe width="560" height="315" src="https://www.youtube.com/embed/9_zGXEmNKPo" frameborder="0" allowfullscreen></iframe>
 </div>
 <div class="video-container">
  <iframe width="560" height="315" src="https://www.youtube.com/embed/zEI8CT7cElQ" frameborder="0" allowfullscreen></iframe>
 </div>
</div>

CSS

.video_responsive{
  padding-left: 1em;
  padding-right: 1em;
}
.video-container{
  position: relative;
  padding-bottom: 56.25%;
  padding-top: 35px;
  margin-top: 20px;
  height: 0;
  overflow: hidden;
}
.video-container iframe{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

如有任何帮助，我们将不胜感激。我这样做是为了 class。教授不知道如何解决这个问题。谢谢

Answer 1

在您的 CSS 中为您的 iframe 设置 max-width: 759px;。

Answer 2

更新 2

OP 提到了对 table 的兴趣。尽管它们可以使布局变得简单，但它们并不是用于布局，而是用于表示数据。幸运的是，有几个 display 值允许元素表现得像 table。在这两个演示中，在桌面模式下，海报（视频空闲时显示的图像）重叠并失真，但视频没有。

最重要的是：

table 元素将表现得像 <table>
table-row 元素将表现得像 <tr>
table-cell 元素将表现得像 <td>

这是一个 article，其中包含有关如何使用 display: table

的提示

这个Plunker正在使用display: table/table-cell

更新 1

这个网站上的代码编辑器不适合复杂的 CSS 所以我把演示移到了 Plunker

总结

2 个正在使用的主要属性是：
- media query
- flexbox
移动模式视口宽度不超过 758 像素
- flexbox布局是堆叠的(flex-flow: column nowrap)
桌面模式视口宽度为 759 像素或更大
- 媒体查询在 759 像素或更大时触发
- flex-flow 现在是 row nowrap

使用媒体查询：

 @media only screen and (min-width: 759px) {
   .video_responsive {
     display: table;
     }
  .video-cpntainer {
    display: table-cell;
    max-width: 45vw;
 }

.video_responsive {
  padding-left: 1em;
  padding-right: 1em;
}
.video-container {
  position: relative;
  padding-bottom: 56.25%;
  padding-top: 35px;
  margin-top: 20px;
  height: 0;
  overflow: hidden;
}
.video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
  @media only screen and (min-width: 759px) {
   .video_responsive {
 flex-flow: row nowrap;
 }
.video-container {
  min-width: 380px;
  max-width: 48vw;
  min-height: 214px;
  max-height: 27vh;
 }
 }

<div class="video_responsive">
  <div class="video-container">
    <iframe width="560" height="315" src="https://www.youtube.com/embed/9_zGXEmNKPo" frameborder="0" allowfullscreen></iframe>
  </div>
  <div class="video-container">
    <iframe width="560" height="315" src="https://www.youtube.com/embed/zEI8CT7cElQ" frameborder="0" allowfullscreen></iframe>
  </div>
</div>

不希望iframe在759px后占100%宽度

Don't want iframe to take up 100% width after 759px

css

iframe

responsive

更新 2

更新 1

总结