引入YouTube视频自动控制开始和暂停

YouTube视频在页面内引入经常会遇到如果不点击暂停后台会继续播放视频的情况   从API文档总结出解决办法  代码如下

      
<div class="vdobox" data-id="gPg0FtL5r7g">
        <p class="myg"><img src="/assets/jqq/close.png" alt=""></p>
        <div id="playerq0"></div>
    </div>

var tag = document.createElement('script');

      tag.src = "https://www.youtube.com/iframe_api";
      var firstScriptTag = document.getElementsByTagName('script')[0];
      firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
      var playerq0;
      function onYouTubeIframeAPIReady() {
        console.log("init")
        var a = $('.vdobox')[0].dataset.id;
        console.log(a);
        playerq0 = new YT.Player('playerq0', {
          height: '100%',
          width: '100%',
          videoId: a, 
           playerVars: {
                'rel': 0,
                'showinfo': 0,
            },   
          events: {
            // 'onReady': onPlayerReady,
            'onStateChange': onPlayerStateChange,
          }
        });
      function onPlayerReady(event) {
        event.target.playVideo();
      }
      var done = false;
      function onPlayerStateChange(event) {
        
      }
      function stopVideo() {
        playerq0.stopVideo();
      }
    }
      $('.myg').click(function(){
        $('.vi_box').css('display','none');
        stopVideo();
    })

解析：

此部分中的 <div> 标记用于标识 IFrame API 将在网页上的什么位置插入视频播放器。播放器对象的构造函数用于按 id 标识 <div> 标记，确保API在正确位置放置 <iframe>，

此部分代码会定义全局变量 playerq0（指您要嵌入的视频播放器），而函数则据此构造视频播放器对象。  videoId: a, ​​​​​​​是需要引入的视频ID；

stopVideo 函数停止播放视频。