不希望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%;
}

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

Answer 1

更新2

OP提到了对表的兴趣。虽然它们可以使布局简单，但它不适用于布局，它们意味着代表数据。幸运的是，有几个display值允许元素表现得像一个表。在这两个演示中，当处于桌面模式时，海报（视频空闲时显示的图像）会重叠并失真，但视频不是。

最重要的是：

• table元素的行为类似于<table>
• table-row元素的行为类似于<tr>
• table-cell元素的行为类似于<td>

这里有一个article，其中包含有关如何使用display: table的提示

此Plunker正在使用display: table/table-cell

更新1

此网站上的代码编辑器不适用于复杂的CSS，因此我将演示移至 Plunker

摘要

• 使用的两个主要属性是：
  • media query
  • flexbox
• 移动模式的视口宽度为758px或更小
  • Flexbox布局堆叠（flex-flow: column nowrap）
• 桌面模式的视口宽度为759px或更高
  • 媒体查询触发759px或更高
  • flex-flow现在是row nowrap

<小时/> 使用媒体查询：

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

在你的iframe的CSS集max-width: 759px;中。