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.
Our highest priority is to satisfy the customer through early and continuous delivery of valuable and working software.
Subscribe to:
Post Comments (Atom)
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?
ReplyDeleteIf 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!
Sorry for the double post, is it possible to make the player bigger?
ReplyDeleteYes.. 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.
ReplyDeletehttp://www.kookys.com//user/index.php?action=kookyOnYoutube
Thanks.
Brilliant, a few dumb questions.
ReplyDelete1. 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
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).
ReplyDelete>> 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.
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.
ReplyDeletehttp://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 ;)!
Cool... let me know if you require any help in integration.
ReplyDeleteThere 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
ReplyDeleteCool, is that directly from youtube?
ReplyDeleteHav'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.
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
ReplyDeletevalue for obj0._id under onYouTubePlayerReady() function. obj0._id set my videoID but it doesn't work
ReplyDeleteis it possible to erase "youtube" writing on the player? if it's possible how do to decide it?
ReplyDelete>> 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
Here is a tutorial on how to change the colour. Very easy, follow the link given below
ReplyDeletehttp://www.chiprang.com/2011/08/how-to-change-youtube-player-colour.html
Hey there,
ReplyDeleteCongratulations, 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
i want to add fullscreen button. can anybody help?
ReplyDelete