CSS YouTube Video摆脱黑色边框

若您曾在网页上嵌入YouTube视频，您可能会注意到视频周围有一个黑色边框。这些黑色边框可能会使视频的外观变得不好看。为了让您的网页看起来更专业一些，您可以使用CSS去掉这些黑色边框。

准备工作

在CSS中隐藏黑色边框的最好方法是覆盖这些CSS样式。之前要了解的几个前提条件包括在您的HTML文件中嵌入的div元素和视频的ID。

以下是一个示例YouTube视频的嵌入代码：

<div class="video-container">
  <iframe width="560" height="315" src="https://www.youtube.com/embed/VIDEOID?rel=0" frameborder="0" allowfullscreen></iframe>
</div>

我们需要使的更改是覆盖iframe元素的CSS样式。

去掉黑色边框

以下CSS代码将去掉YouTube视频的黑色边框：

iframe {
  border: none;
}

使用以上代码，您可以将边框的颜色更改为透明，而且只适用于index页面内的视频。

完整示例

以下是一个完整的CSS示例，可以消除您的网页上所有嵌入的YouTube视频的黑色边框：

.video-container iframe,
.video-container object,
.video-container embed {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

.video-container {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
}

.video-container iframe,
.video-container object,
.video-container embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
}

使用以上代码之后，在您的网页上嵌入的所有YouTube视频都会被正确地呈现，而不会出现难看的黑色边框了。

结论

消除嵌入在您网页上的YouTube视频的黑色边框是使您网页看起来更专业的一种简单的方式。使用以上CSS代码将有助于您的网页更加精致和专业。