How to embed youtube video on your website with custom controls

Youtube is the most popular video sharing website.Here you can create a channel for free and upload your videos and promote it easily. Officially youtube API gives the iframe code to the website,this code can be placed where you want to display it.

Youtube iframe API has several controls are there, those are autoplay,loop,controls.

In general youtube video information.
Every youtube video has a unique id this can be used to play the video on your website.
youtube video id will be displayed like this https://www.youtube.com/watch?v=xI0MsG9XTTk

How to play the youtube video in HTML
Upload the video to your youtube channel.
take the iframe code and place it in the HTML.

Example using iframe
 <iframe width="560" height="315" src="https://www.youtube.com/embed/xI0MsG9XTTk" frameborder="0" allowfullscreen></iframe> 
How to autoplay the youtube videos
You have to play the video automatically. when the user visits the page without clicking the play button, You have to pass the simple parameter to the youtube URL i.e autoplay.

autoplay = 0 This is a default value,here video doesn't play automatically when a player loads
autoplay = 1 The video will play automatically when a player loads.
 <iframe width="560" height="315" src="https://www.youtube.com/embed/xI0MsG9XTTk?autoplay=1" frameborder="0" allowfullscreen></iframe> 
How to play the youtube video continuously.
You have to play the video continuously pass a simple parameter to the youtube URL i.e loop.

loop = 0 this is a default value , the video will play once.
loop = 1 the video will play continuously.
<iframe width="560" height="315" src="https://www.youtube.com/embed/xI0MsG9XTTk?loop=1" frameborder="0" allowfullscreen></iframe>
How to disable the youtube controls on video
If you want to disable the youtube controls on the video player,pass the simple parameter to the youtube URL i.e controls.

controls = 1 this is the dfault vaule, player display the controls
controls = 0 player doesn't display the controls
<iframe width="560" height="315" src="https://www.youtube.com/embed/xI0MsG9XTTk?controls=0" frameborder="0" allowfullscreen></iframe>
* If you like this post please don’t forget to subscribe Techies Badi - programming blog for more useful stuff


EmoticonEmoticon