Tutorials
THE WORLD'S LARGEST WEB DEVELOPER SITE

HTML YouTube Videos

The easiest way to play videos in HTML, is to use YouTube.

Struggling with Video Formats?

 

in the earlier parts of this tutorial, you must have seen that you need to convert the videos to different formats for playing them seamlessly in all browsers.

Conversion of videos to desirable playable formats is pretty difficult and takes a lot of time.

There is an easy solution for this which is letting YouTube play the videos in your web page.

YouTube Video Id

 

YouTube will be displaying an id (like XGSy3_Czz8k), when you are saving (or playing) a video.

You can utilise this id, and make a reference to your video in the web page HTML code.

Playing a YouTube Video in HTML

 

For playing your video on a web page, the following needs to be done:

Example - Using iFrame (recommended)

<iframe width="420" height="315"
src="https://www.youtube.com/embed/XGSy3_Czz8k"
>

</iframe>
Try it Yourself

YouTube Autoplay

 

You can have the option to play your video automatically when a user is visits that page by addition of a simple parameter to the required YouTube URL.

Note: Careful consideration is needed while deciding for videos autoplay. Automatic start of a video could annoy your visitor and can impact by causing more harm than good.

Value 0 (default): When the player loads, the video will not play automatically.

Value 1: When the player loads, the video will play automatically .

YouTube - Autoplay

<iframe width="420" height="315"
src="https://www.youtube.com/embed/XGSy3_Czz8k?autoplay=1"
>

</iframe>
Try it Yourself

YouTube Playlist

 

A comma is used to separate the list of videos to play (in addition to the original URL).

YouTube Loop

 

Value 0 (default): The video will be playing only once

Value 1: The video will be playing in loop (forever).

YouTube - Loop

<iframe width="420" height="315"
src="https://www.youtube.com/embed/XGSy3_Czz8k?playlist=XGSy3_Czz8k&loop=1"
>

</iframe>
Try it Yourself

YouTube Controls

 

Value 0: Player controls will not get displayed.

Value 1 (default): Player controls gets displayed.

YouTube - Controls

<iframe width="420" height="315"
src="https://www.youtube.com/embed/XGSy3_Czz8k?controls=0"
>

</iframe>
Try it Yourself

YouTube - Using <object> or <embed>

 

Note: YouTube <object> and <embed> got deprecated from January 2015. You should be migrating your videos for using <iframe> instead.

Example - Using <object> (deprecated)

<object width="420" height="315"
data="http://www.youtube.com/embed/XGSy3_Czz8k"
>

</object>
Try it Yourself

Example - Using <embed> (deprecated)

<embed width="420" height="315"
src="http://www.youtube.com/embed/XGSy3_Czz8k"
>

Try it Yourself