如何从嵌入式视频中隐藏 YouTube 水印

简介

很多人在使用 YouTube 嵌入式视频时，都会发现视频上有一个 YouTube 的水印，这个水印可能会影响到视觉效果，特别是在一些商业项目中。这篇文章将介绍如何通过 CSS 隐藏 YouTube 嵌入式视频的水印。

实现步骤

1. 首先，我们需要找到该视频的嵌入代码。只要进入 YouTube 视频页面，在视频下方的分享按钮中选择“嵌入”，就可以获取到该视频的嵌入代码。

2. 在嵌入代码中，我们需要找到类似下面的代码：

   <iframe width="560" height="315" src="https://www.youtube.com/embed/xxxxxxxxxxx" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
   

   其中 https://www.youtube.com/embed/xxxxxxxxxxx 是视频的链接地址，而其他属性可以根据需求进行调整。

3. 在页面中添加如下 CSS 样式，即可隐藏水印：

   iframe[src*="youtube.com/embed/"] {
       pointer-events: none;
       position: absolute;
   }
   

   这段 CSS 样式会选择所有 src 包含 youtube.com/embed/ 的 iframe，并使其的指针事件为 none，即不响应鼠标事件，同时将其定位到绝对位置。

4. 如果你想替换水印，可以尝试使用如下 CSS 样式：

   iframe[src*="youtube.com/embed/"] {
       content: "";
       width: 0 !important;
       height: 0 !important;
       padding: 56.25% 0 0 0;
       position: relative;
   }
   iframe[src*="youtube.com/embed/"]:before {
       content: "";
       background: url("your_logo.png") no-repeat center center;
       background-size: contain;
       width: 100%;
       height: 100%;
       position: absolute;
       top: 0;
       left: 0;
       z-index: 1;
   }
   

   这段 CSS 样式将会隐藏原有的水印，并使用你的 logo 来替换。

结论

通过使用 CSS，我们可以轻松地隐藏 YouTube 嵌入式视频中的水印。如果你需要展示自己的 logo，也可以使用 CSS 样式来替换水印。