8 Replies Latest reply on Aug 29, 2013 8:38 AM by RavenDesign

    Youtube Video and Edge. . . . Removing a DIV in edge when video Ends?

    RavenDesign Level 1

      Ok so I've embed a youtube vidoe into Edge with an iframe like this:

       

      $(window).scroll(function() { var top = $(window).scrollTop(); sym.$('#Stage_Iframe').css('top', top); });

       

       

      var container = sym.$('#Stage_Iframe');

      var map = ' <iframe width="100%" height="100%" frameborder="0" scrolling="no" src="http://cirquestyle.comeze.com/aaaaaaaaaaaaaaaaa.html"></iframe>'

      container.html(map);

       

       

       

      Now in the HTML code/file I have the youtube API codes I was wondering if anyone would know how to remove the #Stage_Iframe DIV in Edge when the Video has ended I've tried but i cant seem to get it to remove the DIV in edge here's how I tried:

       

       

      <iframe  id="youtube-iframe" class="Stage_Iframe_id" z-index:999; style="position: absolute; margin: 0px; left: 0%; top: 0%; width: 100%; height: 100%; right: auto; bottom: auto; border: 0px none rgb(0, 0, 0);" src="http://www.youtube.com/embed/DtmKBaBEBXA?enablejsapi=1&version=3&autoplay=1&loop=1&showinf o=0&controls=0&rel=0&wmode=transparent&vq=hd1080&yt:stretch=16:9&yt:crop=16:9" frameborder="0" wmode="Opaque" ></iframe>

       

       

      <script type="text/javascript">

       

       

       

      <!--

            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 player;

      player.quality = 'hd1080';

            function onYouTubePlayerAPIReady() { player = new YT.Player('youtube-iframe', { events: { 'onStateChange': onPlayerStateChange } }); }

       

      function onPlayerReady(event) { event.target.setPlaybackQuality('hd1080'); event.target.playVideo(); }

       

      function onPlayerStateChange(event) {

      if (event.data == YT.PlayerState.BUFFERING) {

          event.target.setPlaybackQuality('hd1080');

      }

              if (event.data == YT.PlayerState.ENDED) {   player.destroy();  $('#Stage_Iframe').hide(); } // end if

            }

                          -->

          </script>

       

       

       

       

      I've underlined the relevent part of the code. . . .

       

       

      Thank you if anyone can help in any way!

        • 1. Re: Youtube Video and Edge. . . . Removing a DIV in edge when video Ends?
          heathrowe Most Valuable Participant

          Try the below, changes in bold; also you are missing a closing bracket on that function. Not sure if it was a 'paste' to forum hiccup.

           

          /////////////////////////////////////////////////////////////

           

          function onPlayerStateChange(event) {

             

              if (event.data == YT.PlayerState.BUFFERING) {

                 event.target.setPlaybackQuality('hd1080');

              }

           

              if (event.data == YT.PlayerState.ENDED) {

                  event.target.destroy();

                  $('#Stage_Iframe').hide();

              }

          }

           

          /////////////////////////////////////////////////////////////

           

          Darrell

          • 2. Re: Youtube Video and Edge. . . . Removing a DIV in edge when video Ends?
            RavenDesign Level 1

            Nope didn't work it removes the Youtube Iframe like before but isn't removing the Stage_Iframe Div in Edge. . . heres my code:

             

            <script type="text/javascript">

             

             

             

            <!--

                  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 player;

            player.quality = 'hd1080';

                  function onYouTubePlayerAPIReady() { player = new YT.Player('youtube-iframe', { events: { 'onStateChange': onPlayerStateChange } }); }

                 

            function onPlayerReady(event) { event.target.setPlaybackQuality('hd1080'); event.target.playVideo(); }

                 

            function onPlayerStateChange(event) {

            if (event.data == YT.PlayerState.BUFFERING) {

                event.target.setPlaybackQuality('hd1080');

            }

                    if (event.data == YT.PlayerState.ENDED) { 

            event.target.destroy();

            $('#Stage_Iframe').hide();

            }

                  }

                                -->

                </script>

            • 3. Re: Youtube Video and Edge. . . . Removing a DIV in edge when video Ends?
              heathrowe Most Valuable Participant

              Regardng this line $('#Stage_Iframe').hide();

               

              Have a look at the name of element in the Elements Panel that represents this. is it

              1. Stage_Iframe

              2.  Iframe

               

              I suspect it # 2.

               

              In that case the above line should be

               

              sym.$("Iframe").hide();

               

              hth

              Darrell

              • 4. Re: Youtube Video and Edge. . . . Removing a DIV in edge when video Ends?
                RavenDesign Level 1

                Yes the ID of the element is Iframe, but its on  the Stage so #Stage_Iframe would also work wouldn't it ?, replacing Stage_Iframe with Iframe still isn't getting it to work I've also tried adding sym still nothing for some reason :/

                I've also tried .remove(); which also doesn't remove the Stage_Ifame. . . I can remove the Iframe in the HTML page that holds the youtube video but the problem is the Stage_Iframe in Edge isn't removing/hiding for what ever reason, Im really lost on this. . . .

                • 5. Re: Youtube Video and Edge. . . . Removing a DIV in edge when video Ends?
                  RavenDesign Level 1

                  Things I've tried:

                   

                  sym.getElementById("#Iframe").hide();

                  sym.getElementById("#Stage_Iframe").hide();

                   

                  getElementById("#Iframe").hide();

                  getElementById("#Stage_Iframe").hide();

                   

                  Also tried remove();

                   

                  Anyone have any idea's?

                  • 6. Re: Youtube Video and Edge. . . . Removing a DIV in edge when video Ends?
                    heathrowe Most Valuable Participant

                    I think I understand completely now what is happening.

                     

                    You are using

                      Edge  (Stage)

                        -- iframe  (html file)

                          -- iframe  ( youtube reference)

                     

                    Three levels, two (both iframe sources) exist 'outside' of Stage (Edge parent document) and you are trying to get container (an Edge variable) to close from the third level (iframe).

                     

                    Any particular reason you are doing it this way?

                     

                    Why not just use the it directly within Edge > Stage.

                     

                    There are some examples in the archives of this forum that work well.

                     

                    Darrell

                    • 7. Re: Youtube Video and Edge. . . . Removing a DIV in edge when video Ends?
                      RavenDesign Level 1

                      Correct, I have an Iframe from youtube embeded into a html file and that html is embeded into edge with an Iframe so 3 levels if you will. . .

                      The reason why Im not using it directly in Edge is because I also have external Js files for resizing and cropping etc etc So I thought I would just load them all into an iframe, thinking this would be easier, its not looking like its not going to be.....

                       

                      This is what I was trying to do...have the youtube video play then remove the iframe and the edge div and under the iframe and div layout would be buttons that come up when the video is removed how ever because I can not get the DIV in edge to be removed the buttons are not funcional and cant be clicked because the container div is above them and that is why I was hoping to remove that div so the button would be come clickable because nothing was on top of them. . .

                       

                      How would I put all of my code directly into edge? Im fairly new in edge and JQuery so that is why I thought an Iframe would be Ideal to work with as My JQuery skills are not strong. . .

                       

                      Here is the code in full with the external Js files and css. . . . I have no idea on how to add it into Edge and add the relevent js files as well. . .

                       

                      <!DOCTYPE html>

                      <html lang="en">

                      <head>

                      <meta charset="utf-8" />

                      <title>DesignFlash Portfolio</title>

                      <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

                      <meta name="keywords" content="Design Flash">

                      <link href="http://designflash.hostzi.com/Ap/DesignFlashLogo.png" rel="shortcut icon">

                       

                       

                      <meta name="robots" content="index,follow" />

                       

                       

                       

                                <link type="text/css" rel="stylesheet" href="/style.css" media="All" />

                                                    <script type="text/javascript" src="/jquery-1.7.2.min.js"></script>

                       

                                <script type="text/javascript" src="/jquery.colorbox-min.js"></script>

                                <script type="text/javascript" src="/jquery.cycle.all.js"></script>

                                <script type="text/javascript" src="/jquery.event.frame.js"></script>

                                <script type="text/javascript" src="/jquery.parallax.js"></script>

                                <script type="text/javascript" src="/jquery.reverze.js"></script>

                                <script type="text/javascript" src="/jquery.backstretch.min.js"></script>

                                <script type="text/javascript">

                      <!--

                       

                       

                       

                       

                       

                       

                       

                       

                       

                       

                       

                       

                      $(document).ready(function() {

                       

                                SetYtbRatio ();

                      });

                       

                       

                       

                       

                       

                      //-->

                      </script>

                       

                       

                      </head>

                       

                       

                      <body>

                       

                       

                      <div id="youtube-fs"><iframe id="youtube-iframe" type="text/html" src="http://www.youtube.com/embed/DtmKBaBEBXA?enablejsapi=1&version=3&autoplay=1&loop=1&showinf o=0&controls=0&rel=0&wmode=transparent&vq=hd1080" frameborder="0" wmode="Opaque" ></iframe>          <script type="text/javascript">

                       

                       

                       

                      <!--

                            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 player;

                      player.quality = 'hd1080';

                            function onYouTubePlayerAPIReady() { player = new YT.Player('youtube-iframe', { events: { 'onStateChange': onPlayerStateChange } }); }

                           

                      function onPlayerReady(event) { event.target.setPlaybackQuality('hd1080'); event.target.playVideo(); }

                           

                      function onPlayerStateChange(event) {

                      if (event.data == YT.PlayerState.BUFFERING) {

                          event.target.setPlaybackQuality('hd1080');

                      }

                              if (event.data == YT.PlayerState.ENDED) {

                       

                       

                      player.destroy(); 

                      $('#Stage_Iframe').hide();

                       

                       

                       

                       

                      }

                            }

                                          -->

                          </script>

                                </div>

                      </div></div>

                       

                       

                       

                      </body>

                      </html>

                      • 8. Re: Youtube Video and Edge. . . . Removing a DIV in edge when video Ends?
                        RavenDesign Level 1

                        Ok so i've tried to directly put it into Edge the video comes up but non of the API's work now ... it doesn't even autoplay for example or remove the youtube iframe what am I doing wrong ?

                         

                        $(window).scroll(function() { var top = $(window).scrollTop(); sym.$('#Stage_Iframe').css('top', top); });

                         

                         

                        var container = sym.$('#Stage_Iframe');

                        var map = ' <link type="text/css" rel="stylesheet" href="http://freelayouts.uphero.com/style.css" media="All" /><script type="text/javascript" src="http://freelayouts.uphero.com/jquery-1.7.2.min.js"></script><script type="text/javascript" src="http://freelayouts.uphero.com/jquery.colorbox-min.js"></script><script type="text/javascript" src="http://freelayouts.uphero.com/jquery.cycle.all.js"></script><script type="text/javascript" src="http://freelayouts.uphero.com/jquery.event.frame.js"></script><script type="text/javascript" src="http://freelayouts.uphero.com/jquery.parallax.js"></script><script type="text/javascript" src="http://freelayouts.uphero.com/jquery.reverze.js"></script><script type="text/javascript" src="http://freelayouts.uphero.com/jquery.backstretch.min.js"></script><script type="text/javascript"><!-- $(document).ready(function() { SetYtbRatio (); }); //--></script><div id="youtube-fs"><iframe id="youtube-iframe" type="text/html" src="http://www.youtube.com/embed/DtmKBaBEBXA?enablejsapi=1&version=3&autop lay=1&loop=1&showinfo=0&controls=0&rel=0&wmode=transparent&vq=hd1080" frameborder="0" wmode="Opaque" ></iframe>          <script type="text/javascript"> <!-- 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 player; player.quality = "hd1080"; function onYouTubePlayerAPIReady() { player = new YT.Player("youtube-iframe", { events: { "onStateChange": onPlayerStateChange } }); } function onPlayerReady(event) { event.target.setPlaybackQuality("hd1080"); event.target.playVideo(); } function onPlayerStateChange(event) { if (event.data == YT.PlayerState.BUFFERING) { event.target.setPlaybackQuality("hd1080"); } if (event.data == YT.PlayerState.ENDED) { player.destroy(); $("#Stage_Iframe").hide();} } --> </script> </div> </div></div>'

                        container.html(map);