Our highest priority is to satisfy the customer through early and continuous delivery of valuable and working software.

Saturday, January 31, 2009

Is there a way to change YouTube player skin?

Many of you have tried embedding YouTube video in webpage using EMBED tag. It’s very easy. Just copy the code and paste it in webpage, it will start streaming video. You may think, what’s new here? Yes, you are right there is nothing tricky here. Wait for a while.

Check the second scenario. Let say you want to steam any random video (.flv) other than YouTube video. What options do you have? Either you can use built in flash video player with little customization to match look and feel with your website theme or you can use free open source flash video player (e.g. flowplayer) to stream your video. So, what’s exciting here? Nothing.

Now check the third scenario. Let say you want to steam video provided by YouTube, but want to change video skin to match look and feel with your website? What you will do? Is there any option available to change skin of YouTube player other than default skin?

Yes; it’s possible. You can choose “YouTube Custom Player” if you just want to change background color, name of the player and content of default YouTube player. Or you can user “YouTube Chromeless Player”. You can use either JavaScript APIs or Flash APIs to make your custom player.

See the demo here; cromeless player using JavaScript APIs.

I found some limitation in integrating this APIs
(1) YouTube has provided numerous functions to integrate. But it’s hard to control various events like play, pause, mute, un-mute etc. in design.
(2) The given example support embedding of only one video player at a time. What to do if you have more than one video on a webpage?

I have made a JavaScript class using JavaScript APIs which allows user to overcome both the listed issues.

You can download the class and example code here!

Also, check the demo here of what I have implemented.

If you find any difficulties using this class, please contact me.

Hope you will find this post helpful.

15 comments:

  1. That is brilliant, i am just downloading it now. I havnt checked yet, but would i be able to edit it to change the 'theme' to more suit my website?

    If so, then i will definitely use it - for ages i have tried to find a script or something that could embed a youtube video into another 'skin'.

    10/10 from me!

    ReplyDelete
  2. Sorry for the double post, is it possible to make the player bigger?

    ReplyDelete
  3. Yes.. You can change the theme. My advise is to change the images and if you know little bit HTML/CSS/JS, you can easily modify the code to meet your need. Check the link below. I have used same code to apply another theme.

    http://www.kookys.com//user/index.php?action=kookyOnYoutube

    Thanks.

    ReplyDelete
  4. Brilliant, a few dumb questions.

    1. How do i edit the code to fit a bigger video in, like the one on the Kookie site (Obbviously i would have to change the images - bigger).

    2. How do insert another video into that space - which the video is already there.

    3. Can i insert videos from some other video sharing sites? Such as Yahoo, Youku, Dailymotion etc. (As long as it was the same size as youtube's embedders.

    Cheers... Jak

    ReplyDelete
  5. 1. How do i edit the code to fit a bigger video in, like the one on the Kookie site (Obbviously i would have to change the images - bigger).
    >> Yes, that will be as per your theme. Once you decide on theme and have images, you can change the code. How ever, its good if you have little knowledge of html/css/js. Else you need to ask some one who know the web programming stuff.

    2. How do insert another video into that space - which the video is already there.
    >> If your website is static, you can check source code of link provided above. It has multiple videos on same page. If you want to run one video on a page then you need to change
    value for obj0._id under onYouTubePlayerReady() function. That is video id of youtube video you want to play.


    3. Can i insert videos from some other video sharing sites? Such as Yahoo, Youku, Dailymotion etc. (As long as it was the same size as youtube's embedders.
    >> This JS class is built on youtube video APIs, so it will support only youtube video.

    ReplyDelete
  6. Thanks for all your help, i appreciate it. I will try it out. So you can see it when it's done, this will be the domain of the new website.

    http://www.pie-player.jakclark.co.uk/

    As you can see, i am no pro web designer. But oh well at least i can only get better - and at least it's what i enjoy doing ;)!

    ReplyDelete
  7. Cool... let me know if you require any help in integration.

    ReplyDelete
  8. There is a better skin change than the one proposed here, but I don't know how they did it. The videos are from YouTube. Check this link: http://www.missiomariae.net/videos.html?task=videodirectlink&id=7

    ReplyDelete
  9. Cool, is that directly from youtube?

    Hav'nt been here for a while but i am impressed with that skin. If only i knew how they did it. Oh well, the api on here rocks anyway.

    Thanks for that... Jak.

    By the way, jakclark.co.uk went down and will be back up soon - yay. I will post a link to preview the site in a .png image.

    ReplyDelete
  10. is it possible to erase "youtube" writing on the player? if it's possible how do to decide it? please send me source code. b_bayaraa_d@yahoo.com

    ReplyDelete
  11. value for obj0._id under onYouTubePlayerReady() function. obj0._id set my videoID but it doesn't work

    ReplyDelete
  12. is it possible to erase "youtube" writing on the player? if it's possible how do to decide it?
    >> It's not possible to remove "youtube" writing as its part of youtube video.

    value for obj0._id under onYouTubePlayerReady() function. obj0._id set my videoID but it doesn't work
    >> Let me know what exactly didn't worked?
    http://www.lamp-technologies.com/w3guru/video/

    See working demo above and check HTML source code for that page.

    Thanks

    ReplyDelete
  13. Here is a tutorial on how to change the colour. Very easy, follow the link given below

    http://www.chiprang.com/2011/08/how-to-change-youtube-player-colour.html

    ReplyDelete
  14. Hey there,

    Congratulations, great effort ;)
    I have worked with the chrome-less a lot recently and one of the things that annoys me is that you can't fullscreen the player from an external control due to restrictions in flash itself. I am wondering if it is possible to create a custom player in flash and then add a handler using external_interface class to allow a javascript function to trigger the fullscreen action. What do you think?

    kind regards

    Silversurfer

    ReplyDelete
  15. i want to add fullscreen button. can anybody help?

    ReplyDelete