0 Replies Latest reply on Dec 11, 2014 11:50 AM by CTLVideo

    TIP: Loading multiple YouTube videos and/or Symbols into the same Container.

    CTLVideo Level 1

      I'd been looking for a way to embed not only YouTube videos, but also Symbols into a single Container on the Stage. In other words, if someone is on the page and they click on a button, the content of the Container changes accordingly. Issues I'd been dealing with were things like the video disappeared but the audio continued to play, what to do about multiple videos/Symbols, more being added later, etc. Basically, I was looking at a nightmare. So, after reading through several posts on this forum and experimenting for a couple of days, I came up with the following solutions. Since I couldn't find anything that addressed both YouTube videos and Symbols, I combined them into one. I hope this is helpful.

       

      Change items in Bold. Leave everything else alone. Assign actions and code to the corresponding Button (do NOT assign them to the Stage).

       

      SNIPPET 01

      Purpose: Empty the container

      Action: mousedown

       

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


       

      SNIPPET 02

      Purpose: Load Symbol into container

      Action: mouseup

      var firstS = sym.createChildSymbol("SymbolName", "ContainerName");


       

      SNIPPET 03

      Purpose: Load YouTube video into container

      Action: mouseup

       

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

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

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

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

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

      youtube.attr('src', 'http://www.youtube.com/embed/DF6QvYNHjQ');

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

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


       

       

      STEPS:

      Inserting multiple Symbols into a container.

       

      1. Draw a rectangle on the stage, size it to 640x360 and place it on the Stage where desired.
      2. Convert it to a Symbol and name it “moviecont” (or as appropriate, ContainerName is listed in the above Snippets). This is the Container for your Symbols, so give it a good name. Note that you can not name it “video” as this creates conflicts within EA and will not work.
      3. Double click on it to open it in the Editor.
      4. Click on it again to select it and hit the Delete button (creates a blank Symbol).
      5. Return to the Stage.
      6. Import a video (or whatever you want to be your Symbol's content) into the Library.
      7. Drag it onto the Stage.
      8. Right click and convert it to a Symbol and give it a short name. Repeat this for however many Symbols you would like to have appear in the Container.
      9. In the Elements panel, delete it so it now only appears in the Library and is no longer on the Stage. Repeat this for each Symbol you created in Step 8.
      10. Create a Button and turn it into a Symbol.
      11. Place an Instance of the Button on the Stage.
      12. Right click and open the Actions for the Button instance.
      13. Select mousedown from the list of Actions.
      14. Paste the code from SNIPPET 01 into the Code Window. Be sure to change ContainerName to whatever you named the Container. This removes anything from the Container.*
      15. Click the + button at the top of the Code Window to add a new action, and select mouseup.*
      16. Paste the code from SNIPPET 02 into the Code Window.
      17. Replace SymbolName with the name of the Symbol you would like to appear.
      18. Replace ContainerName with the name of the Container.
      19. Place a new instance of the Button on the Stage and repeat Steps 12 - 18, changing the SymbolName as appropriate.
      20. You should now be able to click a button and have the corresponding video replace anything else in the Container.

       

      * Be sure to assign SNIPPET 01 to mousedown, and SNIPPET 02 to mouseup. Otherwise, you'll be loading the content, then removing it immediately and it will not work. Since you're assigning each Snippet to a separate action instead of both to one action, this gives you a lot of options for customization as far as interactivity.


      STEPS:

      Embedding multiple YouTube videos into a container.

       

      1. Follow Steps 1 - 15 above.
      2. Paste the code from SNIPPET 03 into the Code Window.
      3. Change the ContainerName.
      4. Change the URL for the video. Be sure that you are using the embed URL, not the regular link. If the word “embed” appears in the middle of the link, you’re good. If not, go back to the video’s page and look for the Embed options and get it from there.
      5. Repeat for each new video.

       

      I hope this helps.