Sunday, November 1st, 2009
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:
<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
<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
<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
<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!
