Question

I am trying to show two youtube videos with youtube api. When the first video is ended, the second video comes. I hided the second video by changing div style.

this code works for chrome because chrome load the hidden div on page load. But firefox does not do this, it tries to load div when there is $(“#player”).show(“fast”); jquery code. Is there any other method to do this. I really need to load this div content on page load in firefox.

<div id="jingle"></div>
    <script >
      // 2. This code loads the IFrame Player API code asynchronously.
      var tag2 = document.createElement('script');
      tag2.src = "//www.youtube.com/iframe_api";
      var firstScriptTag2 = document.getElementsByTagName('script')[0];
      firstScriptTag2.parentNode.insertBefore(tag2, firstScriptTag2);
      // 3. This function creates an <iframe> (and YouTube player)
      //    after the API code downloads.
      var jingle;
      function onYouTubeIframeAPIReady() {
        jingle = new YT.Player('jingle', {
          height: '450',
        width: '720',
        videoId: 'lupOKaNHPAA',
           videoId: 'lupOKaNHPAA',
        playerVars: {'wmode':'opaque', 'showinfo':0, 'autoplay': 1, 'rel': 0, 'controls': 0, 'theme': 'light', 'color': 'white', 'modestbranding':1},
          events: {
            'onReady': onPlayerReady1,
            'onStateChange': onPlayerStateChange1
          }
        });
      }

      function onPlayerReady1(event) {
       // event.target.playVideo();

      }

      function onPlayerStateChange1(event) {

       if(jingle.getPlayerState()==0)
        {
            ytplayer.playVideo();
            $("#jingle").hide("fast");
            $("#player").show("fast");




        }
      }


    </script>

<div id="player" style="display:"></div>

<script>

        var tag = document.createElement('script');

        tag.src = 'http://www.youtube.com/player_api';

        var firstScriptTag = document.getElementsByTagName('script')[0];

        firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);



        var ytplayer;

        var interval;

        var stoptime=<?php echo $time;?>;


        var sayi=1;

        var zaman;

        var options = {

            'target': 'player',

            'width': 720,

            'height': 450,

            'videoId': '<?PHP echo $embed;?>',

            'suggestedQuality': 'medium',



            'playerVars': {'wmode':'opaque', 'showinfo':0, 'autoplay': 1, 'cc_load_policy':1, 'cc_lang_pref': <?php if($toplam_dil>=1){echo "'tr'";} else{echo "'en'";} ?>, 'rel': 0, 'controls': 1, 'theme': 'light', 'color': 'white','start': <?PHP echo $s;?>},

            'events': {

                'onStateChange': function(e) {


                    checkTime();

                    showgrade();



                }

            }

        }





        }


        function onYouTubePlayerAPIReady() {


            ytplayer = new YT.Player(options.target, options);



        }



    </script>



<div id="time" style="display:none">0</div>

Answer 1

Try using display:none and display:block in your CSS. Using these properties will assure the elements are in the DOM.