Question

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

Answer 1

对于您要嵌入的每个视频，您应该使用类来创建一致的外观。在以下示例中，创建了一个video-box类，它删除任何边框，将高度设置为100px，并将宽度设置为200px。如果您希望获得一致的外观，请将class="video-box"添加到iframe。

我还包括两个类，其中包括与颜色相反的边框。

实施例

＆＃13;

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

＆＃13;

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

＆＃13;

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

1 个答案: