How To Change Youtube Video Border and Control Bar Color?
May 10, 2011
This post will show you step-by-step how to change your Youtube video border and/or control bar color.
How To Change Youtube Border Color
- The first thing you need to do is go to Youtube.com and locate the video you want to embed on your site
- Below the video, click on the ‘Share‘ button and then on ‘Embed‘
- Below the embed code will be a few checkboxes. Tick the one that says ‘Use old embed code‘. We need to use the old embed code if we want to change the Youtube video border
- Copy this code and paste it on your site where you want to embed your video
- Within the old embed code you will find two instances of the Youtube video url. It will look something like this:
http://www.youtube.com/v/QyiXPKK_BxU?fs=1&hl=en_GB&rel=0
- To add a border, append the following code to both the urls: &border=1 . Your new urls should look like this:
http://www.youtube.com/v/QyiXPKK_BxU?fs=1&hl=en_GB&rel=0&border=1
- To change the color of the border you will need to know the hexadecimal value of the color first. This is a combination of 6 letters and/or numbers, e.g. 8E35EF (purple). Here’s a good website that will show you the hexadecimal values of most colors:
http://www.computerhope.com/htmcolor.htm
- Once you’ve found the hexadecimal value of the color you want for your border, append the following code to both the urls in the Youtube old embed code: &color1=8E35EF . Your new urls should look like this:
http://www.youtube.com/v/QyiXPKK_BxU?fs=1&hl=en_GB&rel=0&border=1&color1=8E35EF
That’s it! You’ve just added a border to your Youtube video and changed the color.
How To Change The Youtube Control Bar Color
- The first thing you need to do is go to Youtube.com and locate the video you want to embed on your site
- Below the video, click on the ‘Share‘ button and then on ‘Embed‘
- Below the embed code will be a few checkboxes. Tick the one that says ‘Use old embed code‘. We need to use the old embed code if we want to change the Youtube video control bar color
- Copy this code and paste it on your site where you want to embed your video
- Within the old embed code you will find two instances of the Youtube video url. It will look something like this:
http://www.youtube.com/v/QyiXPKK_BxU?fs=1&hl=en_GB&rel=0
- Once you know the hexadecimal value of the color you want for your control panel, append the following code to both the urls in the Youtube old embed code: &color2=2B60DE (royal blue). Your new urls should look like this:
http://www.youtube.com/v/QyiXPKK_BxU?fs=1&hl=en_GB&rel=0&color2=2B60DE
Congratulations! You’ve just changed the color of your Youtube control bar.
If you’ve found this tutorial helpful, please leave a comment below. Thanks!
.
Thanks a lot for this!
You’re welcome Eddie!
Great tutorial thanks so much for this.
Im trying to do what your saying but I’m confused as where to put the & code you have above. this is the embedded code from youtube, can you tell me where to insert your border color code.
Hi Andre, make sure that you’re using the ‘old embed code’ from Youtube, and look for the two instances of the youtube video url within the code, e.g. http:/youtube.com/v/xxxxxxxxx?fs=1… Where you see these 2 urls, you’ll need to apend the codes to add a border, color, etc.
ooh I figured it out, I was using there & instead of including the & that you have with the code and keeping there & also. thnx
Glad to hear it’s all sorted out
I have been looking how to do this simple edit for ages, thanks for the tips and great video!
Just one thing I noticed is that in my embed code which was the old one, instead of ‘FS=1′ I had ‘version=3′ none of the amends would work but when I changed to ‘version=1′ it all worked perfectly.
Cheers
Eddy
Eddy´s last [type] ..7 ways to get your new site indexed super fast
Thanks for that Eddy!
Thanks John,
Under the old youtube interface colour was selectable at the same place as the screen size, buggared if I can find it now anywhere on the new panel.
Trust an Aussie to save the day for the try hards like me.
You dont know anything about placing flash slide show on my WP Thesis site do you ?
Cheers Kevin.
“Just one thing I noticed is that in my embed code which was the old one, instead of ‘FS=1? I had ‘version=3? none of the amends would work but when I changed to ‘version=1? it all worked perfectly.”
Yes thanks for that I was going no where fast until then.
Sorry Kevin, have never played around with the Thesis theme.