Categories

XML Flash. How to embed YouTube video into the template

Ray Taylor February 9, 2012
Rating: 5.0/5. From 1 vote.
Please wait...

In this tutorial you will learn how to embed YouTube video into the Flash and/or XML Flash templates using AS3 Action Script

Open ‘main_cs5.fla’ file from /sources/flash folder in Adobe Flash program

Using the library, locate pages movie clip.

Find the page, on which you wish to add YouTube video.

Go to File->Insert in order to add new Symbol.

Make sure to use ‘Movie Clip’ type.

Click on the layer1 to select and press F9 key to open the Action Script panel.

// This will hold the API player instance once it is initialized.
var player:Object;

var loader:Loader = new Loader();
loader.contentLoaderInfo.addEventListener(Event.INIT, onLoaderInit);
// loader.load(new URLRequest("http://www.youtube.com/apiplayer?version=3"));
// HK1EoALZKXQ
loader.load(new URLRequest("http://www.youtube.com/v/YOUR_CODE_HERE?version=3"));

function onLoaderInit(event:Event):void {
    addChild(loader);
    loader.content.addEventListener("onReady", onPlayerReady);
    loader.content.addEventListener("onError", onPlayerError);
    loader.content.addEventListener("onStateChange", onPlayerStateChange);
    loader.content.addEventListener("onPlaybackQualityChange", 
        onVideoPlaybackQualityChange);
}

function onPlayerReady(event:Event):void {
    // Event.data contains the event parameter, which is the Player API ID 
    trace("player ready:", Object(event).data);

    // Once this event has been dispatched by the player, we can use
    // cueVideoById, loadVideoById, cueVideoByUrl and loadVideoByUrl
    // to load a particular YouTube video.
    player = loader.content;
    // Set appropriate player dimensions for your application
    player.setSize(480, 360);
}

function onPlayerError(event:Event):void {
    // Event.data contains the event parameter, which is the error code
    trace("player error:", Object(event).data);
}

function onPlayerStateChange(event:Event):void {
    // Event.data contains the event parameter, which is the new player state
    trace("player state:", Object(event).data);
}

function onVideoPlaybackQualityChange(event:Event):void {
    // Event.data contains the event parameter, which is the new video quality
    trace("video quality:", Object(event).data);
}

Now, we can search for video on youtube.com and copy the video code

Once that is done, go back to the Pages movie clip. Find our newly added symbol in the Library and drag it into the Scene.

Publish your .FLA file when you are done.

Note: you may not see the video while publishing the .FLA file. We should upload the template to the live server. (upload the content of ‘site_flash’ folder).

Once we have uploaded the template to the server, we can preview our YouTube video.

This is it. You know how to embed YouTube Video into the Flash and XML Flash templates, using AS3 action script.

XML Flash. How to embed YouTube video into the template

Submit a ticket

If you are still unable to find a sufficient tutorial regarding your issue please use the following link to submit a request to our technical support team. We'll provide you with our help and assistance within next 24 hours: Submit a ticket