2 Replies Latest reply on Jan 4, 2016 11:57 AM by GMAN1955

    Creating/Deleting Symbol Instances with Youtube

    CPBTenner Level 1

      Hello,

       

      I have searched high and low and have not been able to come up with a solution to this so I am hoping the community can help.  I have a simple file that has a show video button and a hide video button. When the show video button is clicked I would like an instance of the video symbol to be created that shows a youtube video.  When the hide video button is clicked I would like the instance to be deleted.  When the show button is clicked again it should create a new instance with the youtube video again.

       

      I am trying to find a way of making the youtube video refresh/reload when it appears on the screen, currently when I show/hide the video symbol the movie keeps playing in the background.

       

      **Notes** When I change "newVideo" to video in the youtube embed code the video appears when the button is clicked, and another appears below it when it is clicked again, but when I delete the "video" symbol it will not reappear when I click the show button.

       

      Here is the code I have placed in each button:

       

      Show Video:

      var newVideo = sym.createChildSymbol("video", "Stage");

      newVideo.getSymbolElement().css({

      'position':'absolute',

      'left':30,

      'top':48

      });

       

      //code to embed youtube into symbol

      var youtube = $("<iframe/>");

      sym.$("newVideo").append(youtube);

      youtube.attr('type', 'text/html');

      youtube.attr('width', '640');

      youtube.attr('height', '360');

      youtube.attr('src', 'https://www.youtube.com/embed/MyFv6UKsW70?rel=0');

      youtube.attr('frameborder', '1');

      youtube.attr('allowfullscreen', '0');

       

       

      Hide Video:

      sym.getSymbol("newVideo").deleteSymbol();

       

      Here is a link to my project zip:

      http://www.capitalpress.biz/html5ads/youtube/CreateDeleteYoutube.zip

       

      Thank you for your help!

       

      Brandon

        • 1. Re: Creating/Deleting Symbol Instances with Youtube
          CPBTenner Level 1

          I figured out how to reset the Youtube video upon hiding thanks to Heathrowe's answer and FigFrance's contribution to the thread found here:

           

          https://forums.adobe.com/message/4979969#4979969

           

          This is a more elegant solution than deleting and recreating the container every time. The secret was adding .empty() to my video container.  Here is my functioning button code:


          Show Video:

          //code to embed youtube into symbol

          var youtube = $("<iframe/>");

          sym.$("video").empty().append(youtube);

          youtube.attr('type', 'text/html');

          youtube.attr('width', '640');

          youtube.attr('height', '360');

          youtube.attr('src', 'https://www.youtube.com/embed/MyFv6UKsW70?rel=0');

          youtube.attr('frameborder', '1');

          youtube.attr('allowfullscreen', '0');

           

           

          // Show an element

          sym.$("video").show();

           

           

          Hide Video:

          sym.$("video").empty();

           

          // Hide an element

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

           

          Brandon

          • 2. Re: Creating/Deleting Symbol Instances with Youtube
            GMAN1955

            OK - I found this useful - but it's still not working. I can display a video in a video container in the browser using a 'PLAY' button and play the video itself by clicking the video. I can also close the video container and get it to stop playing when I click a 'CLOSE' button. BUT - if I click the 'PLAY' button again, the video does not open. I've tried using the sym.$("video").empty().append(youtube); code in the code in the CompositionReady window, but then my video doesn't display when I click the 'PLAY' button.

             

            Here's the code I have in the CompositionReady window:

            var youtube = $("<iframe/>");

            sym.$("vcontainer05").append(youtube);

            //sym.$("vcontainer05").empty().append(youtube);

            youtube.attr('type', 'text/html');

            youtube.attr('width', '560');

            youtube.attr('height', '315');

            youtube.attr('src', 'https://www.youtube.com/embed/kXvA5CqGPbI');

            youtube.attr('frameborder', '0');

            youtube.attr('allowfullscreen', '0');

             

            (This allows me to open the video when I click the 'start' button)

             

            Here's the code on the 'PLAY' button:

            sym.$("vcontainer05").show();

             

            Here's the code on the 'CLOSE' button:

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

            sym.$("vcontainer05").empty();

             

            So - to reiterate - if I comment out the second line in the CompositionReady and uncomment the third line - the video doesn't play when I click the 'PLAY' button. If I play it as written above, the video container opens and I can play the video and then stop it and hide the container. But then when I click 'PLAY' again - the video won't play a second time.

             

            Here's the goal. I want to have a UI displaying as a static image in the background and then have several hotspot buttons over certain areas of the UI. When a user clicks a hotspot, I want a video to play near that hotspot. So, if I have 5 hotspots, I would need 5 different video containers scattered around the UI. When a user clicks a hotspot, I would like the hidden container to display and the video to show. When they click 'Close' which would be a button that would be revealed when they click the hotspot, it would close the video.

             

            I would also like it if when a user clicks a second video while the first is playing, it would close the first video before opening the second video.

             

            How can I accomplish this? I really need some help here!

             

            Thanks,