2

我对 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%;
}

任何帮助，将不胜感激。我正在为一堂课做这个。教授不知道如何解决这个问题。谢谢

4

2 回答 2

2

更新 2

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

最重要的是：

  • table元素的行为就像<table>
  • table-row元素的行为就像<tr>
  • table-cell元素的行为就像<td>

这是一篇文章，其中包含有关如何使用的提示display: table

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

更新 1

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

概括

  • 使用中的 2 个主要属性是：
  • 移动模式 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;
 }


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

于 2016-03-31T17:49:39.610 回答
1

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

于 2016-03-31T17:45:51.817 回答