95

I am working on a site that has a ton of embedded youtube videos, the client wants to show a popup whenever a video stops splaying.

I looked at the youtube api and there seems to be a way to detect when a video ends:

http://code.google.com/apis/youtube/js_api_reference.html

but I can't embed the videos like they mentioned on that page since the videos are all already on the site (thousands that have been added manually by pasting embed code).

Is there a way to detect the ending of these videos without changing any of the existing videos (using javascript)?

  • 2
    The only thing I could suggest is programmatically changing the embed entries to include `enablejsapi=1`. If they are in a database it should be fairly easy to change the `src` attribute. You might need some regex if they are statically inserted into HTML files. – download Oct 21 '11 at 18:59

2 Answers2

179

This can be done through the youtube player API:

http://jsfiddle.net/7Gznb/

Working example:

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

    <script src="http://www.youtube.com/player_api"></script>

    <script>

        // create youtube player
        var player;
        function onYouTubePlayerAPIReady() {
            player = new YT.Player('player', {
              width: '640',
              height: '390',
              videoId: '0Bmhjf0rKe8',
              events: {
                onReady: onPlayerReady,
                onStateChange: onPlayerStateChange
              }
            });
        }

        // autoplay video
        function onPlayerReady(event) {
            event.target.playVideo();
        }

        // when video ends
        function onPlayerStateChange(event) {        
            if(event.data === 0) {          
                alert('done');
            }
        }

    </script>
l2aelba
  • 18,585
  • 20
  • 90
  • 131
  • 1
    How did you integrate this with multiple videos on one page? – motoxer4533 Jul 30 '12 at 20:07
  • @motoxer4533 well I didn't have to deal with multiple videos on the same page but only one per page. Not sure if the API allows multiple players to be created and their individual endpoints detected. –  Jul 30 '12 at 20:26
  • 1
    should not be hard to setup for multiple players - just setup multiple var player1, var player2, var player 3 etc then run the setup code multiple times - with each new var – codeguy Oct 09 '12 at 12:05
  • Also a full example of doing something similar using the iframe api here https://developers.google.com/youtube/iframe_api_reference#Getting_Started – JeremyWeir Aug 05 '13 at 22:20
  • Does this work for YouTube Live events? https://developers.google.com/youtube/v3/live/ – JAL Dec 03 '14 at 21:48
  • How to use this with iframe tag? – vipul sorathiya Apr 07 '16 at 05:28
  • Don't forget to use the HTTPS link of youtube else you get an warning in your website's certificate – Flappy Oct 06 '16 at 14:16
  • 3
    For readability, I'd advice YT.PlayerState.ENDED when checking state. – Bart Burg Jun 26 '17 at 13:46
  • 1
    If you're just trying to play the video as soon as it's ready, the API now offers the `autoplay` parameter -- add `playerVars: { autoplay: '1' }` to the initialization arguments. See https://developers.google.com/youtube/player_parameters for more information. – Fund Monica's Lawsuit May 29 '18 at 05:32
  • you can add multiple YouTube player on same page, i have added multiples video they are working fine – Shahid Islam Oct 18 '20 at 14:55
-7

What you may want to do is include a script on all pages that does the following ... 1. find the youtube-iframe : searching for it by width and height by title or by finding www.youtube.com in its source. You can do that by ... - looping through the window.frames by a for-in loop and then filter out by the properties

  1. inject jscript in the iframe of the current page adding the onYoutubePlayerReady must-include-function http://shazwazza.com/post/Injecting-JavaScript-into-other-frames.aspx

  2. Add the event listeners etc..

Hope this helps

yshouman
  • 72
  • 5