Welcome to our site. Please register to gain access to all premium downloads. Thank you.

Designs

March 8, 2011

Making a Custom YouTube Video Player With YouTube’s APIs

More articles by »
Written by: admin
Tags: , ,
download3

Video presentations are a great addition to any product page. With a presentation you can showcase your product’s features without making the visitor read through long paragraphs of text. But apart from producing the video, you still need to manually convert it and find (or code) some sort of flash player that will display it on your site.

The other possible path is that you upload it to a video sharing site such as youtube, but you are going to have a rough time trying to incorporate the player into your design.

Luckily for us, YouTube does provide a solution to this problem – their chromeless player (a stripped down version of the regular embeddable player), which allow you to build and style your own custom controls. This way you have both a quick and secure way to include videos in your pages, and the freedom to customize any way you might want to.

The Idea

Today we are going to make a jQuery plugin which uses YouTube’s chromeless player, and creates our own set of minimalistic controls, which allows for perfect integration with your designs. The supported controls include a Play/Pause/Replay button, and a clickable progress bar.

The plugin is going to use YouTube’s gdata api to determine whether embedding has been allowed for the video, and fetch extensive information about it, such as title, description, tags, screenshots & more, which you can use to improve the plugin.

Using the plugin to embed videos is extremely easy:


Demo: Click here to see a Demo

Download it here

Popularity: 12%



About the Author

admin
BayChaser is just another web owner who has a love for creativity and enjoys sharing and experimenting with various techniques in both print and web. And mess up all the WordPress Themes that he can lay his hands on.




2 Comments


  1. is it possible to hide youtube logo?


  2. Many of you have asked us for a version of the YouTube player without a YouTube logo, so the video plays without any branding nearby. We’ve now added a simple option to do it. At the end of the video URL in your embed code, just add the code ?modestbranding=1 and the player will show without the YouTube logo in the control bar. Note that a small “YouTube” text label will still show up in the upper-right corner of a paused video when you hover over the player



Leave a Reply

Your email address will not be published. Required fields are marked *

*


*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>


 
WordPress plug in area Check it out