HTML YouTube Videos

❮ Prev Next ❯

Sometimes you may want to convert your videos to other formats to make them play in all browsers. However, it can be difficult and time-consuming to convert videos to other formats. An easier way is to let YouTube play the videos on your web page.

When saving or playing a video, YouTube will display an id which you can use to refer to a video in the HTML code.

Playing a YouTube Video in HTML

If you want to play your video on a web page, follow these steps:

Upload the video to YouTube
Take a note of the video id
Specify an <iframe> element in your web page
Make the src attribute point to the video URL
Use the height and width attributes for defining the dimension of the player
Add other parameters to the URL

Example of playing a YouTube video in HTML with the <iframe> element:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <iframe width="560" height="315" src="https://www.youtube.com/embed/i8n1gSw_o_8"></iframe>
  </body>
</html>

Try it Yourself »

YouTube Autoplay

You can also make your video start playing automatically when visiting that page. For this, add a parameter to your YouTube URL.

If the value is 0 (default), the video will not start playing automatically when the player loads. If the value is 1, the video will start playing automatically when the player loads.

Example of YouTube autoplay:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <iframe width="560" height="315" src="https://www.youtube.com/embed/i8n1gSw_o_8?autoplay=1">
    </iframe>
  </body>
</html>

Try it Yourself »

Besides the original URL, there can be a comma separated list of videos to play (YouTube playlist).

YouTube Controls

If the value is 0, the player controls will not display. If the value is 1(default), the player controls will display.

Example of YouTube controls:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <iframe width="560" height="315" src="https://www.youtube.com/embed/i8n1gSw_o_8?controls=0">
    </iframe>
  </body>
</html>

Try it Yourself »

YouTube Loop

If the value is 0 (default), the video will play only once. If the value is 1, the video will loop endlessly.

Example of Youtube loop:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <iframe width="560" height="315" src="https://www.youtube.com/embed/i8n1gSw_o_8?playlist=tgbNymZ7vqY&loop=1">
    </iframe>
  </body>
</html>

Try it Yourself »

YouTube - Using the HTML <embed> or <object> tags

YouTube <embed> and <object> elements are deprecated. Instead, you should use <iframe>.

Example of adding YouTube videos with the <embed> element:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <embed width="560" height="315" src="https://www.youtube.com/embed/i8n1gSw_o_8">
  </body>
</html>

Try it Yourself »

Example of adding YouTube videos with the <object> element:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <object width="560" height="315" data="https://www.youtube.com/embed/i8n1gSw_o_8">
    </object>
  </body>
</html>