Contact Me


qrcode

Recent Posts


Categories


Archives


Tags

3d actionscript Actionscript 2 Actionscript 3 api APIs as2 as3 brand caching carousel channel code compress contest contract CSS Flash flv fp10 free freelance gadget gadgets gdata google JavaScript jquery mvc papervision papervision3d PHP player playlist puremvc pv3d search tube tutorial twitter video widget XML you youtube

Recent Comments

  • Ahmed: Can you put up an example?
  • Ahmed: Hmmm sorry this is a tough one but I don’t work with ASP.NET! Sorry!
  • Michael: Good example but one question… in all the slider skinning I see with Flex the thumb overruns the left...
  • venkata: Hi I am using OAuth to connect to youtube api. I got accessToken and TokenSecret for a particular user. Now...
  • Ahmed: Good old flexlib, what component are you using?

Links


Help end world hunger

Introducing Vid – A jQuery Plugin For All Your Video Embedding Needs

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!

Share the love:

  • Share/Bookmark

Related posts:

Tags: , , , , , , , ,
Posted in: APIs, Development, JavaScript on Sunday, November 1st, 2009.
You can leave a response, or trackback from your own site.

2 Responses to “Introducing Vid – A jQuery Plugin For All Your Video Embedding Needs”

Leave a Reply

Your comment:

Allowed tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>
Fork me on GitHub