📜  如何从嵌入式视频中隐藏 youtube 水印:2021 - Html (1)

📅  最后修改于: 2023-12-03 15:37:55.980000             🧑  作者: Mango

如何从嵌入式视频中隐藏 YouTube 水印:2021 - Html

如果你正在使用 YouTube 嵌入式视频播放器,你可能会发现视频中会出现 YouTube 的水印。这可能会让你的网站看起来不够专业或不符合你的品牌标志。在本文中,我们将介绍一些方法来从嵌入式视频中隐藏 YouTube 水印。

使用 YouTube API

使用 YouTube API 可以帮助你从嵌入式视频中隐藏水印,同时还可以提供更多的自定义选项。下面是一些步骤:

  1. Google Cloud 控制台 注册一个新的项目并启用 YouTube Data API v3。
  2. 创建一个 OAuth2.0 凭据,并将其添加到你的项目中。
  3. 在你的 HTML 代码中将视频代码替换为以下代码:
<script src="https://apis.google.com/js/platform.js"></script>
<div class="youtube-player"
  data-id="VIDEO_ID"
  data-related="0"
  data-controls="0"
  data-showinfo="0"
  data-modestbranding="1"
></div>
<script>
  // Load the YouTube API
  if (!window.YT) {
    const tag = document.createElement('script');
    tag.src = "https://www.youtube.com/iframe_api";
    const firstScriptTag = document.getElementsByTagName('script')[0];
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
  }
  
  let player;
  function onYouTubeIframeAPIReady() {
    player = new YT.Player('player', {
      height: '360',
      width: '640',
      videoId: 'VIDEO_ID',
      playerVars: {
        modestbranding: 1,
        rel: 0,
        showinfo: 0,
        controls: 0
      }
    });
  }
</script>

在这个代码片段中,你需要用实际的视频 ID 替换 VIDEO_ID。

使用 CSS

如果你只是想快速隐藏水印,你也可以使用 CSS。下面是一个示例:

/* Hide YouTube logo in bottom right corner of video */
.ytp-watermark {
  display: none !important;
}

把上面的 CSS 代码添加到你的 HTML 文件中,这样就可以隐藏水印了。但是需要注意,这种方法只适用于最近几年的 YouTube 播放器版本。旧版本的播放器可能会显示水印,不受 CSS 控制。

结论

以上就是从嵌入式视频中隐藏 YouTube 水印的两种方法。使用 YouTube API 可以提供更多的自定义选项,同时该方法也比较复杂。使用 CSS 可以让你快速隐藏水印,但是这种方法可能不适用于旧的 YouTube 播放器版本。请选择适合你的方法。