Blog
Youtube movie insertion with jQuery
I really like the embed feature of Youtube which allow users to insert the video player on their own website, I even use it sometimes on my own blog.
But when it comes to a web page loading time, I'm quite an OCD. I also think that loading data from a different website is a performance killer, That's why I removed the Hypem plugin of my blog, because if you happen to not put the outbound link at the end of the document, most browser will try to load the remote data before rendering the rest of the DOM. So when Hypem went slow, so I did.
Further more, the user might not want to watch the video. He might not even have Flash installed. So why would I force him to create a hit on a third party site ? Useless.
On a final note, I also hate pasting their embed code in my posts, it breaks the semantic in a pretty bad way and limit my content to modern web browsers: It also would be a lot easier for me to just paste the URL.
So I poked around to try to handle it gracefully, for the author, the developer AND the end user.
It's my first prototype so features are stripped down to minimum, but it can be quite easily extended.
OK enough introduction, here's a demo
Behind the scene
For the author
First for the author it's totally transparent:
OK enough introduction, [here's a demo](http://www.youtube.com/watch?v=XxOqE1bEA_Q)
A lot better than this:
<object width="425" height="355">
<param name="movie" value="http://www.youtube.com/v/XxOqE1bEA_Q&rel=1"></param>
<param name="wmode" value="transparent"></param>
<embed src="http://www.youtube.com/v/XxOqE1bEA_Q&rel=1" type="application/x-shockwave-flash" wmode="transparent" width="425" height="355"></embed>
</object>
For the end user
The user are not forced to load a flash file on a remote site, thus slowing down the overall loading time AND cluttering your design with something futile at best.
If the user does not use a modern or flash enabled browser, it degrades to standard link.
If the user click a second time the link it direct him to Youtube, but I'm not really sure it's a good idea anymore, I might get rid of it.
Personally I also use CSS to indicate that the link will show Youtube content.
For the developer
For the developer it looks like this:
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.flash.js"></script>
<script type="text/javascript" src="jquery.youtubeLinksToEmbed.js"></script>
// auto initialization
$(document).ready(function(){
$('body').youtubeLinksToEmbed();
});
And it's retroactive :)
Note: jQuery Flash plugin is required.
Source code
Pleas note that it is a prototype so consider this as a alpha version, I don't recommend using it as is on a production site.
(function($){
var yl2e = {
onclick: function() {
if ($(this).next().hasClass('youtubeLinksToEmbed')) return true;
href = 'http://www.youtube.com/v/' + this.href.match(/[a-zA-Z0-9-_]+$/) + '&rel;=1'
wrapper = $('<div class="youtubeLinksToEmbed" style="display:none;"><span>Loading...</span><div style="display:none;"></div></div>');
player = $('div:first', wrapper);
player.flash({src: href, width: 425, height: 355});
$(this).after(wrapper);
wrapper.queue(function(){
$(this).css('height', 40);
$(this).dequeue();
$(this).slideDown();
$(this).dequeue();
});
setTimeout(function(){
wrapper.queue(function(){
$(this).find('span').hide().end();
$(this).dequeue();
$(this).animate({height: 375});
$(this).dequeue();
});
setTimeout(function(){
player.show();
}, 500);
}, 1500); // *try* to avoid Flash's flash
return false;
}
}
$.extend($.fn, {
youtubeLinksToEmbed: function(options){
$(this).find('a[href~=youtube.com/watch?v=]')
.addClass('youtubeLinksToEmbed')
.each(function(){
$(this).click(yl2e.onclick) });
}
});
})(jQuery);
post a comment Comments
Probably, but anyway this script is already outdated since Youtube have released a public API which allow you to do pretty much whatever you want with embed videos.
I still haven't play with it as I don't have much time to spend on small projects like this, but I will probably try it soon or later.
Thanks for the comment.
permalink h3 ~ April 6, 2008 at 4:59 p.m.
how to download it ?
permalink WILSON ~ June 4, 2008 at 7:12 p.m.
Oh sorry, there is no official download link.. but you can fetch it from code.google.com, just click "View raw file"
http://code.google.com/p/jquery-utils...
permalink h3 ~ June 5, 2008 at 6:18 p.m.
How i may contact the administrator of a site? I have a question.
permalink Fuecymype ~ September 23, 2008 at 8:06 a.m.
How i may contact admin this site? I have a question. iijiivei
That's pretty tight. I wonder how you could make it more obvious that the link isn't just going to take you off the page to YouTube - maybe a little down arrow or something. Nice.
permalink Marcus ~ April 6, 2008 at 4:38 p.m.