Remove Play/Pause on embedded youtube video

Question

I have embedded a youtube video on my site, and want to remove all play/pause functionality form it. I have already made it so that the controls are not visible; however, the video still pauses when the user clicks on the video.

I'm using a youtube "player" and div to embed it:

<div id="player" style="position: absolute; width:100%; height: 100%;" frameborder="0">   </div>

<script>
var player;
  function onYouTubeIframeAPIReady() {
    player = new YT.Player('player', {
      height: '100%',
      width: '100%',
      videoId: 'Ir8-0xOptFA',
      playerVars: { 'autoplay': 1, 'controls': 0, 'showinfo' : 0, 'wmode' : 'transparent', 'modestbranding': 1},
      events: {
        'onReady': onPlayerReady,
      },
      version: 3
    });
  }
 </script>

The idea is that this video will serve as the 'background' for the main page of the site. Any insights would be much appreciated!

Answer 1

Have you thought about overlaying a transparent DIV?

Your question may have already been answered here?

Answer 2

Look into THIS link

And THIS link.

You may have to load the preview image in place of the button. Not sure if that will help