html change color on youtube video

Question

i need some help. I have seen on many different websites that they have changed the color of the youtube video menu.

this one

i dont know how to change the color.

my code.

<iframe width="760" height="428" src="https://www.youtube.com/embed/92HOgzQvtOw" frameborder="0" allowfullscreen></iframe>

if you know how to change color please write a comment i have been searching everywhere and i have not found an asnwer. hope i can get one here :)

thank you

Solution 1

EDIT: This answer is deprecated since YouTube has changed how their player works. I'll try to update this answer when I can.

You can change it by specifying color when you embed a Youtube video as mentioned in their documentation here.

color (supported players: AS3, HTML5) This parameter specifies the color that will be used in the player's video progress bar to highlight the amount of the video that the viewer has already seen. Valid parameter values are red and white, and, by default, the player will use the color red in the video progress bar.

Unfortunately it seems AS3 and JavaScript are deprecated now so you will have to use the Youtube Iframe embed API. They have documentation I linked about and I believe you would go about setting up by simply making the embed link have the color parameter i.e.

https://www.youtube.com/embed/M7lc1UVf-VE?color=white

<iframe width="560" height="315" src="https://www.youtube.com/embed/M7lc1UVf-VE?color=white" frameborder="0" allowfullscreen></iframe>

If you want a CUSTOM color... I believe the only way is creating a custom progress bar (along with all the video controls because the two are tied together. That is a little more extensive. I feel they purposely they did this so the player can stay true to the original brand. You can however do something with the API because you have access to player.getVideoLoadedFraction() and player.getCurrentTime()

Playback status

player.getVideoLoadedFraction():Float Returns a number between 0 and 1 that specifies the percentage of the video that the player shows as buffered. This method returns a more reliable number than the now-deprecated getVideoBytesLoaded and getVideoBytesTotal methods.

So if you really wanted, you can customize your own progress bar by feeding it in values with JavaScript.

Solution 2

Try to add ?theme=light to the YouTube URL.

Comments

[aug]

possible duplicate of Is there a way to change the slider colour in an embedded YouTube video?

[Simon East]

I can't see any difference between the red/white setting. Is that because the particular video you linked to is now broken?

[Gino]

Many people seem to have a kind of talent putting video that will no longer work 2 month latter :)

[aug]

@Gino thanks for calling it out -- YouTube updated their player recently so the above option no longer works. I'll try to see if I can update this answer but for now I'll mark this answer as deprecated.