从 YouTube 视频 iframe 中删除控件

YouTube视频嵌入到网页中的iframe默认会包含一些控件，如播放器控制条、视频标题、推荐视频等。但有的场景下我们可能不想显示这些控件，那么如何从YouTube视频 iframe中删除这些控件呢？

以下是实现的几种方式：

1. 通过URL参数

YouTube API提供了一些URL参数可以用来控制是否显示控件，最常用的有 controls 和 showinfo 参数。

controls=0 表示去除播放器控件条，showinfo=0 表示去除视频标题和推荐视频。

<iframe src="https://www.youtube.com/embed/VIDEO_ID?controls=0&showinfo=0"></iframe>

需要注意的是，这种方式只能在视频开始播放前生效，在播放过程中通过URL参数改变是无法去除已经显示出来的控件的。

2. 通过CSS样式控制

除了通过URL参数控制外，我们还可以通过CSS样式控制iframe中的元素。如下所示，通过设置 display:none 去除播放器控件条、视频标题和推荐视频。

<style>
  .hide-controls .ytp-chrome-top, .hide-controls .ytp-chrome-bottom, .hide-controls .ytp-title-link {
    display:none !important;
  }
</style>

<iframe class="hide-controls" src="https://www.youtube.com/embed/VIDEO_ID"></iframe>

3. 通过JavaScript控制

实际上，除了CSS控制外我们也可以通过JavaScript控制iframe中的元素。以下是一段代码可以控制去除播放器控件条、视频标题和推荐视频：

<iframe id="player" src="https://www.youtube.com/embed/VIDEO_ID?enablejsapi=1"></iframe>

<script type="text/javascript">
  var player;
  function onYouTubeIframeAPIReady() {
    player = new YT.Player('player', {
      events: {
        'onReady': onPlayerReady
      }
    });
  }
  function onPlayerReady(event) {
    event.target
      .getIframe()
      .contentWindow.document
      .querySelector('#movie_player > div.ytp-chrome-top, #movie_player > div.ytp-chrome-bottom, #movie_player .ytp-title-link')
      .style.display = 'none';
  }
</script>

该代码会先创建一个YouTube Player对象，然后在视频加载完成后通过DOM选择器找到相应的元素，再将它们的样式设置为 display:none。

以上是几种从YouTube视频 iframe中删除控件的方式，开发者们可以根据具体需求选择适合自己场景的方法。