适合 youtube 在网站上嵌入播放列表答案

【问题标题】：fit youtube embed playlist on website适合 youtube 在网站上嵌入播放列表
【发布时间】：2015-03-02 19:48:58
【问题描述】：

我正在尝试在网站的 div 中嵌入 youtube 播放列表。视频有各种尺寸。有些视频在侧面包含黑色边框，有些在顶部和底部。那么如何设置样式以使视频具有一致的大小而没有黑色边框。你能给我指出正确的参考吗？谢谢

【问题讨论】：

标签： javascript css html youtube playlist

【解决方案1】：

对于您想要嵌入的每个视频，您应该使用类来创建一致的外观。在下面的示例中，创建了一个 video-box 类，该类删除任何边框，将高度设置为 100 像素，并将宽度设置为 200 像素。任何时候如果您想拥有这种一致的外观，请将class="video-box" 添加到iframe。

我还包括了两个类，其中包括在对面带有颜色的边框。

例子

.video-box {
  width: 200px;
  height: 100px;
  border: none;
}
.border-top-bottom {
  border-top: 5px solid yellow;
  border-bottom: 5px solid yellow;
}
.border-left-right {
  border-left: 5px solid yellow;
  border-right: 5px solid yellow;
}

<body>
  <iframe class="video-box border-top-bottom" src="https://www.youtube.com/embed/eU66as4Bbds" allowfullscreen></iframe>
  <iframe class="video-box" src="https://www.youtube.com/embed/eU66as4Bbds" allowfullscreen></iframe>
  <iframe class="video-box border-left-right" src="https://www.youtube.com/embed/eU66as4Bbds" allowfullscreen></iframe>
</body>

【讨论】：

谢谢你，但我认为会有一种更有效的方式，因为会有很多视频切换和变化。