如何在全屏中隐藏 YouTube 栏

有时候，我们在观看 YouTube 视频时，希望在全屏模式下隐藏 YouTube 栏以获得更好的观看体验。在这篇文章中，我们将介绍如何使用 JavaScript 在全屏模式下隐藏 YouTube 栏。

步骤 1：获取元素

首先，我们需要获取要隐藏的元素，即 YouTube 栏。使用 Chrome 浏览器的开发者工具或类似工具，我们可以查找其 class 或 id。在这种情况下，我们想隐藏的元素的 class 名称为“ytp-chrome-top”。

const youtubeBar = document.querySelector('.ytp-chrome-top');

步骤 2：进入全屏模式

在隐藏 YouTube 栏之前，我们需要先进入全屏模式。我们可以使用 HTML5 Fullscreen API 进入全屏模式。

const video = document.querySelector('.html5-main-video');
video.requestFullscreen();

步骤 3：隐藏元素

现在，我们已经准备好隐藏 YouTube 栏了。为了做到这一点，我们只需要将其样式中的 display 属性设置为“none”。

youtubeBar.style.display = 'none';

步骤 4：退出全屏模式后显示元素

当我们退出全屏模式时，我们需要将之前隐藏的元素再次显示出来。我们可以使用 fullscreenchange 事件检测何时退出全屏模式并显示元素。

document.addEventListener('fullscreenchange', () => {
  if (!document.fullscreenElement) {
    youtubeBar.style.display = 'block';
  }
});

现在，我们已经完成了如何在全屏中隐藏 YouTube 栏的所有步骤。完整的代码如下：

const video = document.querySelector('.html5-main-video');
const youtubeBar = document.querySelector('.ytp-chrome-top');

video.requestFullscreen();

youtubeBar.style.display = 'none';

document.addEventListener('fullscreenchange', () => {
  if (!document.fullscreenElement) {
    youtubeBar.style.display = 'block';
  }
});

使用这个代码片段，您可以在全屏模式下隐藏 YouTube 栏，以获得更好的观看体验！