HTML 5 & jQuery YouTube Player – Quick And Easy Out of the box Implementation


Adding Customized YouTube Video Players to your website is one thing that is becoming a must have on your websites today.  If your like me, I am not satisfied with just using the plugins available Google.

Fortunately google does have a developers API that allows us to create custom applications with the services they provide.

I have put together a quick dirty API for you to implement into your websites, and learn a little about what actually happening behind the scenes.

I won’t waste your time.  If you just want to throw a custom player with some basic functionality on your site, I have create a API for you to use to add custom video player’s to your site right now.

Art’s Super Simple Custom YouTube Player

Add this to the header section or before the main content of where you want your player to be on your website:
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js”></script&gt;
<script src=”http://arthicksdev.com/api/jYouTube/api/ytPlugin.js&#8221; type=”text/javascript”></script>
<link href=”http://arthicksdev.com/api/jYouTube/styles/base.css&#8221; rel=”stylesheet” type=”text/css” />


The Actual Player object.  I currently have this formatted to have a width of 700px.   I will be adding to this API for you to customize this further later.  Here is the HTML for the Player:

<div id=”yt_player” class=”yt_player”>
<div>
<header class=”heading”>Art’s Custom YouTube Player</header>
</div>
<div id=”yt_video”></div>
<div id=”playlist”>
Loading…
</div>
</div>

Last but not least, you need to add the call to go the the videos you want.  I have made this easy by providing two simple options.  One would be getting the videos by your YouTube username, and the Second would be getting videos by a custom playlist that you have constructed.  Here is the code to choose your destiny:

<script>
//Get Videos By Playlist
buildlist(“playlist”, “446FA4139341C1A8″);
//Get All Videos by Username
// buildlist(“user”, “arthicksdev”);
</script>

Observe the function’s listed above.  The option “playlist” is for play you have created.  You can easily get this string of characters by going to the play list and looking at the url.  E.G.

I have added the a basic style sheet for you to get started.  In following POST I will show you how you can customize it to match your site.

Here is an example of the final product:

http://arthicksdev.com/api/jYouTube/player

This is for I don’t care about the implementation and I want to try it code  NOW! ^_^:
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js”></script&gt;
<script src=”http://arthicksdev.com/api/jYouTube/api/ytPlugin.js&#8221; type=”text/javascript”></script>
<link href=”http://arthicksdev.com/api/jYouTube/styles/base.css&#8221; rel=”stylesheet” type=”text/css” />
<div id=”yt_player” class=”yt_player”>
<div>
<header class=”heading”>Art’s Custom YouTube Player</header>
</div>
<div id=”yt_video”></div>
<div id=”playlist”>
Loading…
</div>
</div>
<script>
//Get Videos By Playlist
buildlist(“playlist”, “446FA4139341C1A8″);
//Get All Videos by Username
// buildlist(“user”, “arthicksdev”);
</script>

About these ads

About Art Hicks

I am Business Owner/Applications Engineer that specializes in providing rich solutions to my clients and colleagues.
This entry was posted in Google, HTML5, jQuery, YouTube. Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s