How to stop youtube video in js?

Question

YouTube

Greetings.
I bought one slider plugin for WP. I managed to somehow make the slider from the category display the video, not the preview. But there is a minor nuisance)
I have 7 slides in the slider. Each is an embed video from youtube. They don't play automatically. But now I’m thinking about what to add to the plugin’s JS so that when switching a slide, the video from the previous slide stops by itself.
This may not be very critical, because. The video is no longer than two minutes, but still. If a person turned on one video, went to another slide and turned on another, then somehow it’s not cool.
I will be glad if you advise.

Answer 1

There was a similar situation, it was necessary to play when the modal window opens, and if you close it, click on the pause, I found a solution!

<script>
    $(document).on('click', '#close_vid', function() {
      jQuery("iframe").each(function() {
        jQuery(this)[0].contentWindow.postMessage('{"event":"command","func":"pauseVideo","args":""}', '*')
      });
    });
  </script>
  <script>
    $(document).on('click', '#play_video', function() {
      jQuery("iframe").each(function() {
        jQuery(this)[0].contentWindow.postMessage('{"event":"command","func":"playVideo","args":""}', '*')
      });
    });
  </script>

PS: https://www.youtube.com/embed/SMExDCDusx4 ?enablejsapi=1& - this is how you need to enable the API

Answer 2

<script>
function toggleVideo(state) {
    // if state == 'hide', hide. Else: show video
    var div = document.getElementById("popupVid");
    var iframe = div.getElementsByTagName("iframe")[0].contentWindow;
    div.style.display = state == 'hide' ? 'none' : '';
    func = state == 'hide' ? 'pauseVideo' : 'playVideo';
    iframe.postMessage('{"event":"command","func":"' + func + '","args":""}', '*');
}
</script>

<p><a href="javascript:;" onClick="toggleVideo();">Click here</a> to see my presenting showreel, to give you an idea of my style - usually described as authoritative, affable and and engaging.</p>

<!-- popup and contents -->
<div id="popupVid" style="position:absolute;left:0px;top:87px;width:500px;background-color:#D05F27;height:auto;display:none;z-index:200;">
   <iframe width="500" height="315" src="http://www.youtube.com/embed/T39hYJAwR40?enablejsapi=1" frameborder="0" allowfullscreen></iframe>
   <br /><br />
   <a href="javascript:;" onClick="toggleVideo('hide');">close</a>

More details here stackoverflow.com/questions/8667882/how-to-pause-a...
and google for "js stop youtube video in iframe"

Answer 3

You can hang something like this

var videoSrc = $("#Player1").attr("src");
$("#Player1").attr("src","");
$("#Player1").attr("src",videoSrc);