HTML YouTube Videos

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:

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

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

<!DOCTYPE html>
<html>
  <body>
    <iframe width="560" height="315" src="https://www.youtube.com/embed/i8n1gSw_o_8"></iframe>
  </body>
</html>

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>
  <body>
    <iframe width="560" height="315" src="https://www.youtube.com/embed/i8n1gSw_o_8?autoplay=1">
    </iframe>
  </body>
</html>

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>
  <body>
    <iframe width="560" height="315" src="https://www.youtube.com/embed/i8n1gSw_o_8?controls=0">
    </iframe>
  </body>
</html>

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>
  <body>
    <iframe width="560" height="315" src="https://www.youtube.com/embed/i8n1gSw_o_8?playlist=tgbNymZ7vqY&loop=1">
    </iframe>
  </body>
</html>

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>
  <body>
    <embed width="560" height="315" src="https://www.youtube.com/embed/i8n1gSw_o_8">
  </body>
</html>

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

<!DOCTYPE html>
<html>
  <body>
    <object width="560" height="315" data="https://www.youtube.com/embed/i8n1gSw_o_8">
    </object>
  </body>
</html>



Do you find this helpful?

Related articles