posted on:December 14, 2009
How to Display a Flash Video From Youtube in a Modal Window Using Easy Frontend Framework
Although the title of the article is long this process is very simple. This article will demonstrate how simple it is to use interactive functions built into Easy front-end framework.
Note: Please read the license before you use the Easy or some if it’s files. It is free to use but you are required to respect the copyright info and put a footer backlink.
Download Easy package. If you are using this on existing you can only use the files found in folder called js. The files are: jquery.js, easy.js and main.js. Put this code inside the head tag of your document.
By doing this you will not only be able to perform the task explained in this article, you will also gain access to all other Easy interactive functions.
Go and fetch the URL of the flash video you want to display. Go to Youtube video page where you will find the embed code (shown in the image below).
From that code you will extract only the URL of the video itself. We don’t need the entire object tag code but you need to remember the video size (width and height) for best preformance.
So from this code:
<object width="560" height="340"> <param name="movie" value="http://www.youtube.com/v/cnvkeJds7zc&hl=en_US&fs=1&"></param> <param name="allowFullScreen" value="true"></param> <param name="allowscriptaccess" value="always"></param> <embed src="http://www.youtube.com/v/cnvkeJds7zc&hl=en_US&fs=1&" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="560" height="340"></embed></object>
we’re extracting this:
The same thing can be done with any other video service that offer video sharing. All you need to do is grab the direct URL of the flash movie.
Now we go to our document. Create a link, text or image and add the video URL to it:
To activate the modal window feature in Easy all we need to add a class name called “popup” and to make sure that the object tag is generated we’re adding another class name called “flash”. Now the code looks like this:
<a href="http://www.youtube.com/v/cnvkeJds7zc&hl=en_US&fs=1" class="popup flash"></a>
To make sure that the video is displayed in correct size we need to add width and height value in the rel attribute:
<a href="http://www.youtube.com/v/cnvkeJds7zc&hl=en_US&fs=1" class="popup flash" rel="width:560;height:340"></a>
If you forget this step the script will give default width and height values.
That is all! You can see this in action on the Easy front-end framework demo page.
I also invite you to check out other Easy features. Have fun and send your feedback!
Enjoyed the article?
Then don't miss our next one! Subscribe to our RSS feed or share it with your friends.
Comments (9 Comments)
Sorry, the comment form is closed at this time.