It all started with a tweet:
@tensafefrogs: Cleaning up the YouTube embed code a bit: http://bit.ly/3oA4yM
I replied to Geoff saying ‘why not use javascript?’ to which he said: ‘because we want to be compatible with many (every) publishing platforms, and many of them don’t allow javascript’.
So that got me thinking, why not create a simple and small jQuery plugin for embedding videos… So I did…
I’ve stuck it up on github, it’s called ‘vid‘ and it’s very simple to use:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | < !DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html;charset=UTF-8" /> <script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script> <script type="text/javascript" src="http://github.com/ahmednuaman/vid/raw/master/jquery.vid.js"></script> </head> <body> <div id="flash" style="width: 500px; height: 400px;"></div> <script type="text/javascript"> <!-- $(document).ready( function() { var api = $( '#flash' ).vid({ type : 'youtube', videoId : 'R7yfISlGLNU' }); }); --> </script> </body> </html> |
And this gives you (yep, it really is my favourite video):
Cool eh? Not only does it work for YouTube, but also Vimeo, DailyMotion and of course, 1Click2Fame.com (come on, I’m not going to leave my own player out am I?).
Vimeo
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | < !DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html;charset=UTF-8" /> <script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script> <script type="text/javascript" src="http://github.com/ahmednuaman/vid/raw/master/jquery.vid.js"></script> </head> <body> <div id="flash" style="width: 500px; height: 400px;"></div> <script type="text/javascript"> <!-- $(document).ready( function() { var api = $( '#flash' ).vid({ type : 'vimeo', videoId : '1161962' }); }); --> </script> </body> </html> |
DailyMotion
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | < !DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html;charset=UTF-8" /> <script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script> <script type="text/javascript" src="http://github.com/ahmednuaman/vid/raw/master/jquery.vid.js"></script> </head> <body> <div id="flash" style="width: 500px; height: 400px;"></div> <script type="text/javascript"> <!-- $(document).ready( function() { var api = $( '#flash' ).vid({ type : 'dailymotion', videoId : 'xayowc' }); }); --> </script> </body> </html> |
1Click2Fame.com
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | < !DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html;charset=UTF-8" /> <script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script> <script type="text/javascript" src="http://github.com/ahmednuaman/vid/raw/master/jquery.vid.js"></script> </head> <body> <div id="flash" style="width: 500px; height: 400px;"></div> <script type="text/javascript"> <!-- $(document).ready( function() { var api = $( '#flash' ).vid({ type : '1click2fame', videoId : '1987' }); }); --> </script> </body> </html> |
I must say, much love to Jonathan Neal for his jQuery SWFObject plugin, I’m using that here.
So check it out, tell me if you want anything added to it, and fork me! I’m going to be enabling JavaScript API interactions very soon too!




Currently not in use on the live site (given) but will be soon as it all works in development while renovating the site (please don’t judge me on the quality of the current site
its not mine). Good little app, nice and tidy.
Phil
Posted: December 9, 2009 at 10:30 am;Anything I can do to help, I need to update this plugin, need to implement oembed too
Posted: December 9, 2009 at 8:39 pm;