FREE THOUGHT · FREE SOFTWARE · FREE WORLD

Home » Javascript » Adding YouTube Videos To Website, 4 Methods

Adding YouTube Videos To Website, 4 Methods

by Charles Torvalds

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.

<object width="480" height="385"><param name="movie" value="http://www.youtube-nocookie.com/v/-HIB706Tvwo?fs=1&hl=en_US"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube-nocookie.com/v/-HIB706Tvwo?fs=1&hl=en_US" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="480" height="385"></embed></object>

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

Javascript for Youtube NoCookie Embed

This javascript will create the flash player.

<script type="text/javascript">
swfobject.embedSWF(
"http://www.youtube-nocookie.com/v/-HIB706Tvwo?autostart=true", "youtubeinner", "270", "280",
"9", "", yt1, yt2, { id: "yt1",name: "yt1" });
</script>

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):

<iframe width="854" height="480" src="https://www.youtube.com/embed/-HIB706Tvwo" frameborder="0" allowfullscreen></iframe>
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. ;)

Tags

Comments Welcome

Information is freedom. Freedom is non-negotiable. So please feel free to modify, copy, republish, sell, or use anything on this site in any way at any time ;)

My Online Tools

Popular Articles
Hacking and Hackers

The use of "hacker" to mean "security breaker" is a confusion on the part of the mass media. We hackers refuse to recognize that meaning, and continue using the word to mean someone who loves to program, someone who enjoys playful cleverness, or the combination of the two.
-- Richard M. Stallman


It's very simple - you read the protocol and write the code. -Bill Joy

>

Except where otherwise noted, content on this site is licensed under a Creative Commons Attribution 3.0 License, just credit with a link.
This site is not supported or endorsed by The Apache Software Foundation (ASF). All software and documentation produced by The ASF is licensed. "Apache" is a trademark of The ASF. NCSA HTTPd.
UNIX ® is a registered Trademark of The Open Group. POSIX ® is a registered Trademark of The IEEE.

+Askapache | htaccess file | htaccess.guru

Site Map | Contact Webmaster | License and Disclaimer | Terms of Service | @Htaccess

↑ TOPMain