Creative Suite Resource for Designers
Connect With Me
B&H Photo Video Pro Audio

Adobe Edge Animate: Append() Youtube Video


SAMPLE PREVIEW AND DOWNLOAD NOW UPDATED FOR THE LATEST VERSION OF EDGE ANIMATE

Here is a neat little snippet to get a YouTube HTML5 video control inside Adobe Edge Animate.

Preview YouTube HTML5 video sample.

Setup Div Container

  • First select the Rectangle Tool (M), then draw a div element.
  • Once the div is created, alter the Size: w/h properties to fit the specifications of the YouTube player. I used 450 px (w). To get a proportionally scaled size, multiply the width by 0.8235 (source information youtubeonyoursite). In this case the height will be 350 px (h).
  • Optionally set the Background Color and Border Color.
  • Name this div element vcontainer.

Set up Stage Action

  • In the Elements Panel, click the Action icon (encircled in red, below) to the left of the root ‘stage’ node.
  • At the Actions Panel click the Add Action icon (+) and from the list choose compositionReady.
  • Copy/Paste the below code snippet into the Actions Panel, close it. File > Save your Project; then File >Preview in Browser.

Note: I use the Stage > compositionReady as an example use case. The snippet can be used wherever you wish to trigger it.

Code Snippet

 var youtubevid = $("<iframe/>");
 sym.$("vcontainer").append(youtubevid);

 youtubevid.attr('type','text/html');
 youtubevid.attr('width','425');
 youtubevid.attr('height','350');
 youtubevid.attr('src','http://www.youtube.com/embed/GqcPh3OXoNo');  // url/Video_Id
 youtubevid.attr('frameborder','1');	   // 1 | 0
 youtubevid.attr('allowfullscreen','0');   // 1 | 0

Code Snippet Explained:

  • Line 1 creates a javascript object and stores it in a variable called ‘youtubevid’.
  • Line 2 does symbol lookup for an element called ‘vcontainer’, and then appends the previuosly created object to it.
  • Line  4- 9 defines the attribute parameters for the ‘youtubevid’ object.
    Match the width/height values to that of your div container.
    Replace the Video_Id (GqcPh3OXoNo) with the youtube video reference you want to show.

For more information about jquery append() method.

For a complete list of YouTube video control parameters.

Download Sample File (sample also includes standard video embed)

append() YouTube Video Control Method

Use the jquery append() method to insert YouTube Video Control Method in Edge Animate.

Share and Enjoy

6 Comments
  1. u made my day

  2. one more item: it´s not working while using firefox (macos)
    safari and chrome are working well

  3. i tried to combine the “nested div hint” with the youtube hint ebove. it´s working well untill i´ll close the bested div. so… the video is still playing in the background. i did no find a way to stop it on “hide”-event for nested div.
    any idea?

  4. i had to edit the filename_edgeActions.js to embed the code into “nested”-symbol-stage.

    now i have to find an solution to kill videoplayback whil hiding nested symbol-div.
    here is just a test: http://makaber.de/edge_example/timeline.html

  5. wordpress has filtered som parts of the code. here it is again: http://pastebin.com/dxNvcAh5