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.

If you are building a site based on Easy then you should already have the JavaScript files linked to your HTML documents. But you can use these functions on your existing sites by adding necessary files.

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.

View all Easy front-end framework modal window demos

Step 1

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.

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/easy.js"></script>         
<script type="text/javascript" src="js/main.js"></script>

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.

Step 2

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:

http://www.youtube.com/v/cnvkeJds7zc&hl=en_US&fs=1

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.

Step 3

Now we go to our document. Create a link, text or image and add the video URL to it:

<a href="http://www.youtube.com/v/cnvkeJds7zc&hl=en_US&fs=1"></a>

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.

Share on FacebookTweet thisDeliciousStumbleUpon RedditSubscribe

Comments (9 Comments)

1. james
   December 14, 2009

   Hi very nice article.

2. Jaycent
   December 14, 2009

   That was easy.

3. cssglobe
   December 14, 2009

   Told ya ;)

4. Karl Roos
   December 14, 2009

   Where is this taking us? Developers are just becoming more and more lazy! Back in the days you had to write tons of code to achieve this! Great post ;)

5. cssglobe
   December 14, 2009

   Not to worry Karl, developers still have a lot of stuff to work on. After all someone did write tons of code to achieve this ;)

6. Destiny Islands
   December 15, 2009

   This is so great! Flash video is becoming the next best thing of the web, and streaming is just getting more and more popular as time goes on. You've got some great tips here for it, and I hope to use these on my website!

7. 3D ??? ??????
   December 15, 2009

   Thanks! Very Good article!

8. shoaib hussain
   December 21, 2009

   now this is a site that i m sticking to make my web journey a bit easy one. love all of your posts(althoug i have read only 5 of em so far.

9. Ev Tekstili
   December 31, 2009

   I was looking for that. Thanks for article.

Sorry, the comment form is closed at this time.