Youtube api - stop video

Question

I need some help with Youtube API and embeded videos. I want to stop video when clicked on some element (div,link,td etc.). I am trying to get it work just for 1 video now, but the final function of this script should be to stop all videos loaded on current page. I have read thru the YT API documentation but Im really beginner in JS so its still quite hard to understand for me.

<html>
<head>
    <script type="text/javascript" src="swfobject.js"></script>
</head>
<body>

<a href="javascript:ytplayer.stopVideo()">Play</a>
<br/>
<iframe id="ytplayer" src="http://www.youtube.com/embed/8Ax-dAR3ABs?rel=0&iv_load_policy=3&showinfo=0&enablejsapi=1&version=3&playerapiid=ytplayer" type="application/x-shockwave-flash" frameborder="0" allowscriptaccess="always"></iframe>

</body>
</html>

thanks in advance for any advices

Use `callPlayer("ytplayer", "stopVideo");` using the small function from [Youtube iframe API: how do I control a iframe player that's already in the HTML?](http://stackoverflow.com/a/7513356). — Rob W, Aug 03 '12 at 19:59
You can try using an event like this: $("#ytplayer")[0].contentWindow.postMessage('{"event":"command","func":"stopVideo","args":""}', '*'); — Bogdan Alexandru Militaru, Jul 10 '17 at 14:25

score 14 · Accepted Answer · answered Jul 12 '11 at 22:10

14

You can't control it if you embed it with an iframe. You have to use object embedding, like this:

<object id="ytplayer" style="height: 390px; width: 640px">
    <param name="movie" value="http://www.youtube.com/v/8Ax-dAR3ABs?version=3&enablejsapi=1">
    <param name="allowScriptAccess" value="always">
    <embed id="ytplayer" src="http://www.youtube.com/v/8Ax-dAR3ABs?version=3&enablejsapi=1" type="application/x-shockwave-flash" allowfullscreen="true" allowScriptAccess="always" width="640" height="390">
</object>

The rest of your code should generally work after that, although it may need to be updated to say:

<a href="javascript:document.getElementById('ytplayer').stopVideo()">Play</a>

Also, have you seen the demo site? http://code.google.com/apis/youtube/youtube_player_demo.html

answered Jul 12 '11 at 22:10

Jordan

31,971
6
56
67

thanks for quick answers, but it still doesn't work for me. I've tried other swfobjects, object embedding, change the code and ofc I've seen the demo site, but I'm not able to find out how they did play/pause/stop buttons, not even from their html/js codes. I think my problem is more likely trivial (as usual), maybe I'll try to read the documentation again and solve it. – mdr Jul 12 '11 at 23:29
I saw your swfobject link. Why don't you post a jsfiddle with what you have and we can hash it out? – Jordan Jul 13 '11 at 03:36
3

You actually can control an embedded YouTube video within the iframe now: http://apiblog.youtube.com/2011/01/introducing-javascript-player-api-for.html – Dan Smart Sep 08 '11 at 08:53
There is an actual Javascript API, saying you must use the flash object one isn't true. (and it was available before this answer was given too) – Jimbo Jonny Dec 19 '12 at 08:50
Watch out for the duplicate ids in this answer, that's bad HTML. You run API commands on the `` object and not on ` – Justin McCandless Nov 26 '13 at 20:10

score 7 · Answer 2 · answered Jul 25 '12 at 09:01

I recently wrote a little jquery for this, from the youtube api

I wanted to stop all videos from playing with a single action

<html>
<head>
<!-- jquery -->
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
</head>
  <body>
    <!-- player divs -->
    <div id="player1"></div>
    <div id="player2"></div>
    <div id="player3"></div>

    <a class="stop">Stop</a>

    <script>
      // load  api
      var tag = document.createElement('script');
      tag.src = "//www.youtube.com/iframe_api";
      var firstScriptTag = document.getElementsByTagName('script')[0];
      firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

      // make player array
      var players = new Array();

      function onYouTubeIframeAPIReady() {
        players[0] = new YT.Player('player1', {
          height: '390',
          width: '640',
          videoId: 'u1zgFlCw8Aw'
        });
        players[1] = new YT.Player('player2', {
          height: '390',
          width: '640',
          videoId: 'u1zgFlCw8Aw'
        });
        players[2] = new YT.Player('player3', {
          height: '390',
          width: '640',
          videoId: 'u1zgFlCw8Aw'
        });
      }

      $('.stop').click( function() {
        //loop players array to stop them all
        $(players).each(function(i){
           this.stopVideo();
          });
      });


    </script>
  </body>
</html>

or to stop a single video:

$('.stop').click( function() {
   playerVariableName.stopVideo();
});

thanks for the code example- this code doesn't work so well on Chrome, but works fine on Safari. I am using it in conjunction with Jquery UI tabs on this page http://andrewwelch.info/filming-craftspeople-makers.php — weaveoftheride, Sep 07 '13 at 11:25

score 0 · Answer 3 · answered Jul 12 '11 at 22:00

Not familiar with the youtube api, but this should work assuming your other code is correct:

<script type="text/javascript">
    player = document.getElementById('ytplayer');

    function stop(){
        player.stopVideo();
        return false;
    }
</script>

<a href="#" onclick="stop()">Play</a>

Insert this into the place of your <a href="javascript:ytplayer.stopVideo()">Play</a> tag.

Youtube api - stop video

3 Answers3

Linked