Youtube iframe 自定义控件

Question

有什么方法可以打开网站上的视频并隐藏所有 youtube 视频控件，例如（点击播放和播放，按 space- 栏播放和播放，按 m 静音，按向上和向下键音量 up/down) 并制作我的自定义视频控件？

Answer 1

您可以使用此代码嵌入 YouTube 视频，同时禁用键盘快捷键和自定义视频控件按钮。而要使用更多的控件和功能，可以阅读YouTube Iframe API reference.

注意：在本地或第三方编译器（如 CodePen, JSFiddle 等）上尝试运行此代码，因为 Stack Overflow 的编译器在编译它时遇到问题。

//YouTube embed with YouTube Iframe API
var tag = document.createElement('script');

      tag.src = "https://www.youtube.com/iframe_api";
      var firstScriptTag = document.getElementsByTagName('script')[0];
      firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

// YouTube embed player details
      var player;
      function onYouTubeIframeAPIReady() {
        player = new YT.Player('player', {
          height: '390',
          width: '640',
          videoId: '668nUCeBHyY',

//Features
playerVars: {
            'controls': 0,
            'rel': 0,
            'disablekb':1,
          },
        });
      }
      
//functions
function playYT() {
        player.playVideo();
}

function pauseYT() {
        player.pauseVideo();
}

<div style="pointer-events:none" id="player"></div><br><br>
<button onclick="playYT()">Play</button>
<button onclick="pauseYT()">Pause</button>

Youtube iframe 自定义控件

Youtube iframe custome controls

html

javascript

youtube

youtube-api