YouTube Videos

//value 0 (default): The video will not play automatically when the player loads.
//value 1: The video will play automatically when the player loads.

<iframe width="420" height="315"
src="https://www.youtube.com/embed/tgbNymZ7vqY?autoplay=1">
</iframe>
//value 0 (default): The video will play only once.
//value 1: The video will loop (forever).

<iframe width="420" height="315"
src="https://www.youtube.com/embed/tgbNymZ7vqY?playlist=tgbNymZ7vqY&loop=1">
</iframe>
//value 0: Player controls does not display.
//value 1 (default): Player controls display.

<iframe width="420" height="315"
src="https://www.youtube.com/embed/tgbNymZ7vqY?controls=0">
</iframe>
  • The easiest way to play videos in HTML, is to use YouTube.
  • YouTube will display an id (like tgbNymZ7vqY), when you save (or play) a video. You can use this id, and refer to your video in the HTML code.
  • You can have your video start playing automatically when a user visits that page by adding a simple parameter to your YouTube URL.
  • Note: YouTube <object> and <embed> were deprecated from January 2015. You should migrate your videos to use <iframe> instead.

Playing a YouTube Video in HTML

<iframe width="420" height="315"
src="https://www.youtube.com/embed/tgbNymZ7vqY">
</iframe>
  • Upload the video to YouTube.
  • Take a note of the video id.
  • Define an <iframe> element in your web page.
  • Let the src attribute point to the video URL.
  • Use the width and height attributes to specify the dimension of the player.
  • Add any other parameters to the URL (see below).

YouTube Videos — Structure map

Clickable & Draggable!

YouTube Videos — Related pages: