HTML Youtube Videos

Embedding youtube videos

To embed youtube video on your web page the following steps should be followed...

  1. Open the youtube video you want to embed.
  2. Click on the Share button under the youtube video.
  3. Choose the embed option, it will show code with iframe as shown below.
  4. Copy the code and paste on your web page, where you want to show youtube videos.
<iframe width="560" height="315" src="https://www.youtube.com/embed/fVjF0loWSc4" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

Youtube autoplay

if you want that youtube video will automatically start playing as page loads complete. you can use the youtube autoplay option.

youtube autoplay option is added in the youtube video URL as shown below...

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

Youtube controls

Similar to the autoplay option, the control option can be specified with the youtube video URL to specify that you want to show/hide youtube controls.

<iframe width="560" height="315" src="https://www.youtube.com/embed/fVjF0loWSc4?control=0"></iframe>

Controls value

  • controls = 1 (default): Display all the control along with the video.
  • controls = 0 Hides all the control from the youtube video.
autoplay and controls

If you want to specify multiple options with a youtube video, then they must be separated by & sign as shown in the code snippet below...

<iframe width="560" height="315" src="https://www.youtube.com/embed/fVjF0loWSc4?control=0&autoplay=1"></iframe>