Autoplay Youtube video in full screen and then redirect

Question

I am having trouble redirecting youtube video after it finished playing using Youtube api.I have css code for styling but that doesn't really matter in this case. Any hep would be appreciated. EDIT: I would like this to be responsive. Here is my code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<HTML>
  <HEAD>
    <LINK href="style.css" rel="stylesheet" type="text/css">
  </HEAD>
  <BODY>
   <div class="video-container">
         <iframe src="http://www.youtube.com/embed/sOS9aOIXPEk?autoplay=1" frameborder="0" width="560" height="315"></iframe>
</div>
</HTML>

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

        // create youtube player
        var player;
        function onYouTubePlayerAPIReady() {
            player = new YT.Player('player', {
             height=''
             width=''
              videoId: '0Bmhjf0rKe8',
              playerVars:{'rel':0,'showinfo':1,'autoplay':1}
              events: {

                'onStateChange': onPlayerStateChange
              }
            });
        }



        // when video ends
        function onPlayerStateChange(event) {        
            if(!event.data)          
                GoHome();
        }
        function GoHome(){
            window.location = 'http://www.google.com';
        }


    </script>

Als · Accepted Answer · 2014-06-19T23:40:46.353

When the video ends the event.data == 2. You also missed some comma's as separator of the object entries. Here is a working example (Note: that the first iframe is commented-out):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<HTML>
  <HEAD>
    <LINK href="style.css" rel="stylesheet" type="text/css">
  </HEAD>
  <BODY>
<!--
   <div class="video-container">
    <iframe src="http://www.youtube.com/embed/sOS9aOIXPEk?autoplay=1" frameborder="0" width="560" height="315"></iframe>
</div>
-->
    <div id="player"></div>

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

        // create youtube player
        var player;
        function onYouTubePlayerAPIReady() {
            player = new YT.Player('player', {
               height: '768',
               width: '1024',
               videoId: '0Bmhjf0rKe8',
               playerVars:{'rel':0,'showinfo':1,'autoplay':1},
               events: {
                'onStateChange': onPlayerStateChange
              }
            });
        }



        // when video ends
        function onPlayerStateChange(event) {
          //alert (event.data);
          if (event.data == 0)
                  GoHome();
        }
        function GoHome(){
            window.location = 'http://www.google.com';
        }

    </script>
</BODY>
</HTML>

This doesn't play full screen. Is there an option to have it play full screen or be responsive? — Anastasia, Jun 19 '14 at 21:42
Sorry, I forgot to add in my original post that I want it to be full screen or responsive. — Anastasia, Jun 19 '14 at 21:43
@Anastasia It only has an option wether or not the user gets an option to go fullscreen by clicking on an icon in the iframe. By default this icon is on the right bottom of the iframe. By responsive you mean the iframe should auto-size itself by the available space ? — Als, Jun 19 '14 at 22:12
@Anastasia See these 2 older questions about fullscreen: http://stackoverflow.com/questions/15114884 and http://stackoverflow.com/questions/7615380 — Als, Jun 19 '14 at 22:30
@Anastasia If you know what height and size you want, then you can set it, when the iframe is created. (Use ':' instead of '='.). I have set the height and width now, in my answer. — Als, Jun 19 '14 at 23:45

Autoplay Youtube video in full screen and then redirect

1 Answers1