Add the youtube video in your web site with the JQuery plugin fancy box

For MosaLingua, I finally choose to add the youtube video in my website, in order to save bandwidth.
But in a beautiful way (at least I hope, see the home page of MosaLingua, and click the button ‘Voir Video’) :

This was very easy, thanks to the excellent JQuery plugin fancybox :

Download the JQuery plugin here, and simply add a link to your video :

<a id=“screencast” title=“‘MosaLingua Espagnol iPhone” href=”http://www.youtube.com/watch?v=xG9kh1hDiFg“>View the screencast</a>

And the following Javascript code :

$(“#screencast“).click(function() {
$.fancybox({
‘padding’ : 0,
‘autoScale’ : false,
‘transitionIn’ : ‘none’,
‘transitionOut’ : ‘none’,
‘title’ : this.title,
‘width’ : 680,
‘height’ : 495,
‘href’ : this.href.replace(new RegExp(“watch\\?v=”, “i”), ‘v/’),
‘type’ : ’swf’,
’swf’ : {
‘wmode’ : ‘transparent’,
‘allowfullscreen’ : ‘true’
}
});

return false;
});

That’s it. Again, a live preview of the video in action on MosaLingua, you can check out the source .

Add your own video without youtube

Ok, then you want to follow the hard way? No problem, it’s not that hard

The simple code to embed the video

The following code is not working on all browser, I didn’t test on IE, but it’s working on safari, firefox and chrome :

<div class=”screencast”>
    <embed src=”screencast.mov” width=”240″ height=”355″ autoplay=”true” controller=”false” loop=”true” scale=”tofit”>
</div>

and the css code :

.screencast {
    background: transparent url(iphone.jpg) no-repeat;
    width: 291px;
    height: 546px;
    position: absolute;
    top: 30px;
    left: 30px;
}
.screencast embed {
    position: absolute;
    top: 100px;
    left: 25px;
}

The iphone.jpg background can be download in iTune connect (you must sign the Apple agreement).

This code is simple, but you are not sure it is working everywhere (need a descent browser : not IE6 and quicktime plugin)/

To be sure your video will be working everywhere, see this article : http://camendesign.com/code/video_for_everybody

Embed the flash video

I hate to say that, but currently, the only way to be sure that the video is working (almost) everywhere, you need to encod it in flash. I am waiting for html5 video implemented everywhere. I have done that for others site, and it’s pretty simple :

Convert your video into flash flv video

I use this free converter :
http://www.leawo.com/free-mac-video-converter/
It’s simple and easy.

Include the flv into your html

You need a player for that. The easiest way is to use the free and open source flowplayer. Example are in the download bundle, so it’s really simple/

Here it is, all the possibilities to include video into your website

easy, fancybox, flash, flowplayer, flv, html5, jquery, video, youtube