HTML Iframes - YouTube Video Parameters

When a YouTube video is embedded into an HTML page using an iframe, it is embedded using the default controls.

However, we can provide some video controls along with the embed URL to overwrite the default behavior.

<iframe src="https://www.youtube.com/embed/5UMde7utfCI" title="YouTube Video" width="800" height="450"></iframe>

Autoplay Parameter

By default, embedded YouTube video is not going to play automatically, and the user has to click the play button to play a video.

However, we can make the video autoplay itself after the page has loaded by setting the below parameter to the source URL.

  • autoplay=1 (enables autoplay)
  • autoplay=0 (default, disable autoplay)
<iframe src="https://www.youtube.com/embed/5UMde7utfCI?autoplay=1" title="YouTube Video" width="800" height="450"></iframe>

Mute Parameter

By default, embedded YouTube video is not going to play without mute, and the user has to click the mute option to mute the audio.

However, we can make a mute option enabled on the embedded video to make it play with mute by setting the below parameter to the source URL.

  • mute=1 (enables mute)
  • mute=0 (default, disables mute)
<iframe src="https://www.youtube.com/embed/5UMde7utfCI?mute=1" title="YouTube Video" width="800" height="450"></iframe>

Controls Parameter

By default, an embedded YouTube video is not going to play without options to play, pause and stop.

However, we can disable video controls by adding an additional parameter to the source URL as shown below.

  • controls=1 (default, enables controls)
  • controls=0 (hides disables controls)
<iframe src="https://www.youtube.com/embed/5UMde7utfCI?controls=0" title="YouTube Video" width="800" height="450"></iframe>

Example

<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
    <h1>HTML Iframes YouTube Video Parameters</h1>
    <h2>Default Parameters</h2>
    <iframe src="https://www.youtube.com/embed/5UMde7utfCI" title="YouTube Video" width="800" height="450"></iframe>
    <h2>Autoplay Parameter</h2>
    <iframe src="https://www.youtube.com/embed/5UMde7utfCI?autoplay=1" title="YouTube Video" width="800" height="450"></iframe>
    <h2>Mute Parameter</h2>
    <iframe src="https://www.youtube.com/embed/5UMde7utfCI?mute=1" title="YouTube Video" width="800" height="450"></iframe>
    <h2>Controls Parameter</h2>
    <iframe src="https://www.youtube.com/embed/5UMde7utfCI?controls=0" title="YouTube Video" width="800" height="450"></iframe>
    <h2>Mute and Autoplay Parameter</h2>
    <iframe src="https://www.youtube.com/embed/5UMde7utfCI?mute=1&autoplay=1" title="YouTube Video" width="800" height="450"></iframe>
</body>
</html>

Overall

We now know how to embed a YouTube video into an HTML page and manage different parameters available on the source URL.