fityoutube在网站上嵌入播放列表

fit youtube embed playlist on website

本文关键字：播放列表 网站 fityoutube      更新时间：2023-09-26

我正试图在网站的div中嵌入一个youtube播放列表。视频有各种尺寸。有些视频的两侧有黑色边框，有些视频的顶部和底部有黑色边框。那么，我该如何设置风格，使视频具有一致的大小，没有黑色边框。你能给我指一下正确的参考资料吗。感谢

对于要嵌入的每个视频，都应该使用类来创建一致的外观。在下面的示例中，创建了一个video-box类，它删除了任何边框，将高度设置为100px，并将宽度设置为200px。任何时候，如果您希望拥有这种一致的外观，请将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>

相关文章：