Customize YouTube Embed Player for your Website with reEmbed

In this article, I'll be discussing about how to customize the YouTube embed player for your website or blog as you like.
Embedding YouTube video player in your blog, website is getting famous day by day. It's a great means to help provide examples, tutorials on the subject matter you are discussing. It help you illustrate the procedure you are going to explain, about the new trick you just discovered or just anything.


Traditional Embedded YouTube Player 


The traditional embed YouTube player is a simple black player with red progress bar, white play button etc. For me, its a little boring. However there are some tricks on the internet that helps you customize the YouTube player with some little code changes and programming.
Here is an article regarding customizing the player skin. It tells how to change the player skin from dark to light but however It's just the beginning level of customization. Here is a web service that helps you customize various features of the YouTube player like player controls, player skin color and that's too without writing a single piece of code and it's absolutely free.
reEmbed Website

reEmbed

reEmbed is a web-service that an all in one service for your YouTube player customization. It provides a range of option to choose from for the player controls, pick up the player skin color and even place a logo of you company/website over the video. 
The best part is you change can the player according the template or interface of your website and blend the YouTube player in the website environment.
The web-service provides the code to embed the player in your website or blog (with various supported blogging service like blogger, WordPress or Joomla) after you have customized one. The webservice provides another services too like video-analytics etc. and it is free of cost. 
Note: I'm in no way trying to promote the web-service or getting monetization from the service. This is for educational/informative purposes only.



Steps to Customize:

The procedure used to get your own customized youtube player is simple, just follow the steps below which shows you how to customize and install the player in your website or blog.
As I am using blogger here I'll be showing you how to install the youtube player in your blog after you have customized it. Note: The player will be the default for every embeded youtube video on your website i.e. every youtube video will have the same player interface.
So let's get started. 

1. Go to www.reembed.com.

2. Click the button "create your free player". A new page opens up where you can customize the player skin, controls etc.

3. First of all, Pick a style of player controls as you like . I choosed the second one.


4. Next Upload a logo of your website/company and upload. If you don't have a logo you can upload any picture or just leave this step.
5. In the next step we are going to select the player skin color according to our website. To select the color of the player it's a little difficult to get the exact match so to deal with that. Go to your website. Right click the element of your website whose color you want to exactly match with the player color and click inspect element. In the styles tab copy the color code and put the code in the color code input box on the selection window in the reembed website. It is best illustrated in this picture. See carefully.



6. Select the background, bar and extra colors with the same technique or you can choose the color randomly.

7. Next click save player and you have to sinup the form. It's free so just go on and fill email, choose password and sinup for an account.

8. Next select the platform you want to install the player in - Html or blog(blogger, wordpress,drupal or joomla).


9. I'm using blogger so i select blogger.Next copy the script and paste the script in the blogger template just before the </head> tag. The complete process of installation for every platform is shown as you select the platform. 

10. All Done! Cheer Up!


Note: Once you have paste the script you will only have to embed the YouTube player as before(no need to put any other code) and it will be automatically customized. It'll be valid for any YouTube video you embed.

After following the process as explained above you will be able to customize the player yourself and install in your website or blog. I created one and this is the customized youtube player for my blog AcidicGinger.



Do you find this post useful? Let me know in the comments!

1 comment:

  1. ♥ Very nice post. Thank you.The reEmbed product did not work for me from a local file on my pc, even after changing the value of "src" as mentioned on their website, So I created a Blogspot just to try it.It worked perfectly.

    ReplyDelete

Powered by Blogger.