youtube iframe api remove all elements from the video and prevent pausing when clicked

Is it possible to remove all visible elements on a youtube video and not give the user a pause?

Read the documentation in the end, I sketched this code, but the top bar, the youtube logo, and the pause still work.

 <div id="player"></div>

    <script>
      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 player;
      function onYouTubeIframeAPIReady() {
        player = new YT.Player('player', {
          height: '800',
          width: '100%',
          videoId: 'P9ylTV2Bg1A',
          playerVars: {'muted': 1, 'autoplay': 1, 'disablekb': 1 , 'controls': 0, 'iv_load_policy': 0, 'loop': 1, 'showinfo': 0, 'modestbranding': 1},
          events: {
            'onReady': onPlayerReady,
            'onStateChange': onPlayerStateChange,
          }
        });
      }

      // 4. The API will call this function when the video player is ready.

      function onPlayerReady(event) {
        player.mute();
        event.target.playVideo();
      }


      function onPlayerStateChange(event) {
        if (event.data === YT.PlayerState.ENDED) {
            player.playVideo(); 
        }
      }
    </script>
Author: Александр, 2020-02-14

1 answers

In general, since the video was half a block high and 100% wide (Black bars), I had to stretch it through scaleX, at the same time, the problem with the interface immediately went away. To disable the pause, set the z-index: -100;


#player{
    transform: scaleX(1.35);
    position: relative;
    z-index: -100;
    // &::before{
    //     content: '';
    //     position: absolute;
    //     top: 0;
    //     bottom: 0;
    //     left: 0;
    //     right: 0;
    // }
}

 1
Author: Александр, 2020-02-14 04:18:56