Skip to main content

HTML YouTube Videos: Embed, Autoplay, Customize, and Loop

To embed a YouTube video in an HTML page, you can use the YouTube embedded player code.

Here are the steps to do so:

  • Go to the YouTube video you want to embed on your HTML page and click on the "Share" button below the video player.

  • Click on the "Embed" option from the list of options that appear.

  • Customize the player size and other settings according to your preferences.

  • Once you have set the settings, copy the HTML code provided by YouTube.

  • Paste the HTML code in your HTML page where you want the video to appear.

  • Save your HTML page and open it in a web browser to view the embedded video.

Here's an example of the YouTube embedded player code:

<iframe
     width="560"
     height="315"
     src="https://www.youtube.com/embed/VIDEO_ID"
     frameborder="0"
     allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
     allowfullscreen
></iframe>
  • Replace the "VIDEO_ID" with the ID of the YouTube video you want to embed.
  • The width and height attributes specify the dimensions of the player, while the other attributes allow for various player settings such as autoplay, full screen, and more.

YouTube Autoplay + Mute​

To autoplay a YouTube video and mute it by default, you can add two parameters to the YouTube embedded player code.

Here are the steps to do so:

  • autoplay=1 to enable autoplay
  • mute=1 to enable mute

As an example:

<iframe
     width="560"
     height="315"
     src="https://www.youtube.com/embed/VIDEO_ID?autoplay=1&mute=1"
     frameborder="0"
     allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
     allowfullscreen
></iframe>

YouTube Loop​

To loop a YouTube video and make it play continuously, you can add a parameter to the YouTube embedded player code.

Here are the steps to do so:

  • loop=1 to enable video looping

As an example:

<iframe
     width="560"
     height="315"
     src="https://www.youtube.com/embed/VIDEO_ID?loop=1"
     frameborder="0"
     allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
     allowfullscreen
></iframe>

YouTube Controls​

To enable or disable YouTube video controls in an embedded player, you can add a parameter to the YouTube embedded player code.

Here are the steps to do so:

  • controls=0 to disable video controls
  • controls=1 to enable video controls (this is the default)

As an example:

<iframe
     width="560"
     height="315"
     src="https://www.youtube.com/embed/VIDEO_ID?controls=0"
     frameborder="0"
     allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
     allowfullscreen
></iframe>