Stop (turn off) youtube video on click on body?

Question

YouTube

Hello Lord.

There are several youtube videos on the page. I needed that when you click on a picture that has its own id, the video, which also has its own id, starts playing. I found this script on the internet:

<script>
$(document).on('click', '.open_window', function() {
  var $video = $('#you_video'),
    src = $video.attr('src');
 
  $video.attr('src', src + '&autoplay=1');
});
</script>

Everything works, but let's say you need the video to somehow stop when you click on the body. I tried to change the script so that when clicking on the body, the autoplay value becomes zero (autoplay=0), it worked, but for some reason only for 1 second.

<script>
$(document).on('click', 'body', function() {
  var $video = $('#you_video'),
    src = $video.attr('src');
 
  $video.attr('src', src + '&autoplay=0');
});
</script>

That is, I click on the picture - the video starts - I click on the body - the video stops for 1 second and starts again from the beginning.

Can someone help me how to click on the body to stop the video until I click on the right image to start the video again?

Answer 1

I found such a solution who will need to use it, just put your classes or id:

<script>
$(document).on('click', '.open_window', function() {
    var $video = $('#you_video'),
        src = $video.attr('src');

    $video.attr('src', src + '&autoplay=1');
});
</script>
<script>
$(document).on('click', '.overlay', function(){
   jQuery("iframe").each(function() {
      jQuery(this)[0].contentWindow.postMessage('{"event":"command","func":"pauseVideo","args":""}', '*')});
});
</script>

PS: in the html code of the YouTube video itself, after the link you need to add the YouTube api - enablejsapi=1
Good luck to everyone!