Top 5 Ways To Customize YouTube Embed Player

Tagged In:    Share it:

Videos are a great way to tell stories and to explain things easily. When we think of video,Youtube comes onto our mind without any doubts and they allows you to embed videos to your site. Very basic editing like changing the player size can be customized right from youtube's embed option. But customizing more advanced options like hiding title bar, autoplay, hide controls, change colors, etc. needs little code work. Here are the top 5 ways to customize youtube embed player.



How To Hide Title Bar In Embedded Youtube Player?

Youtube's embedded player contains a title bar at the top and a player controls at the bottom. If you want to hide the title bar from the embedded player,then use this embed code.

See the Pen Eltxb by Shan Eapen Koshy (@shaneapen) on CodePen.

How To Hide Controls In Embedded Youtube Player?

Sometimes it may be necessary for you to hide the controls in the embedded player. It may sound impossible but it's a piece of cake. Use the following code to hide the controls in embedded youtube player. We have used this type of embed in our top 10 goals of FIFA 2010 post.

See the Pen ydtGc by Shan Eapen Koshy (@shaneapen) on CodePen.

How To Hide Youtube Branding In Embed Player?

If you want to hide the youtube logo from the controls in the embed player use the following code.
<iframe width="560" height="315" src="//www.youtube.com/embed/videoid?modestbranding=1" frameborder="0" allowfullscreen></iframe>

How To Change The Color Of The Youtube Embed Player(Changing theme)

You may have seen youtube players with a different color. There are two color schemes available for the youtube player. One is the dark theme that is more common. The other one is light theme with a whitish grey color. Here is embed code to change theme.
See the Pen KCseD by Shan Eapen Koshy (@shaneapen) on CodePen.

Fast Loading And Thumbnail Only Embed Style

This embed style is fast loading and good looking. The player actually loads only when the user clicks on it resulting in faster page loads. This code was developed by Amit Agarwal of Digital Insiparion

See the Pen pkEir by Shan Eapen Koshy (@shaneapen) on CodePen.