FREE THOUGHT · FREE SOFTWARE · FREE WORLD

Adding YouTube Videos To Website, 4 Methods

This is the advanced example. It uses the jw flv player to create a flash proxy. This basically lets me control the youtube video as if it were a local .f4v file. With this method I can specify any options, autostart, volume, playlists, etc.. But it's rather complex so lets start with 3 other methods to embed YouTube video.

Example Playlist

Flash Embedding Javascript

This javascript library is just like jquery, but for flash. Swfobject is the hybrid combination of the 2 famous flash javascript libraries used before flash 8: SWFObject 1.5, UFO and incorporates more functionality from the Adobe Flash Player Detection Kit. It's an excellent library and allows you to do some very fail-proof flash.

My work specializes in video/audio, mostly for tv/radio but more and more for the web. I have thousands of hours of experience with flash video, mostly incredibly frustrating until I started using swfobject exclusively. The way I use it is to create an html element like a DIV and replace the div with the flash swf, and style the div with css.

Finding the YouTube Video

Just find the video you want on YouTube, press the embed button with privacy mode, and grab the url.


So its, http://www.youtube-nocookie.com/v/-HIB706Tvwo

Javascript for Youtube NoCookie Embed

This javascript will create the flash player.


BETA Iframe Flash Player

Just last month Youtube/google announced a new way to embed flash, and it's the absolute easiest yet. It uses iframes, so you should take the time to add the iframe using DOM scripting rather than just add it like this (which works):


Advanced Youtube Embedding

The above methods are how I started out displaying YouTube videos, but I use another method now. I am an open-source enthusiast, so please check out the init_flash function within my AAJS javascript class in the single javascript file used on askapache.com, which has a lot of unrelated tricks and code snippets you are free to copy, modify, and redistribute ;).

Flash Video Player

The method I use now on this site involves one additional piece of software, a flash video player for the web. Their are many different flash video players out there, youtube has it's own video player, but the one that I use is the same one I have been using since.. oh.. 2006 because it's amazing. No matter which video player you choose, you want it to basically just be an .swf file that loads the videos, whether its .flv, .f4v, or streaming. Currently (10-2010) JW FLV Player is free (sorta) and the source code is open (for now) and is called JW-FLV-Player. Grab it before it goes premium only. I like to use and keep older versions, like I have a very old version that I used to use to play mp3's from a playlist. Actually it's still online if you want to listen..

Using this software you are able to play youtube videos off the youtube servers with a flash player on your server. Here's an example of mine that uses a simple rss playlist of youtube video urls to play the videos, you, the reader, are encouraged to view the source code to figure it out. ;)

Javascript Flash Video YouTube

 

 

Comments