HTML Iframes - YouTube Video Parameter for Controls

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

The video controls section that displays at the bottom of a video can be enabled or disabled by adding a parameter.

By default, embedded YouTube video is not going to include video controls, which include buttons to play, pause, stop, full-screen option, etc.,

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

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 Parameter for Controls</h1>
    <h2>Default Parameters (with controls)</h2>
    <iframe src="https://www.youtube.com/embed/5UMde7utfCI" title="YouTube Video" width="800" height="450"></iframe>
    <h2>Controls Parameter (Enabled to include controls)</h2>
    <iframe src="https://www.youtube.com/embed/5UMde7utfCI?controls=1" title="YouTube Video" width="800" height="450"></iframe>
    <h2>Controls Parameter (Disabled to exclude controls)</h2>
    <iframe src="https://www.youtube.com/embed/5UMde7utfCI?controls=0" 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 video controls by adding a parameter to the source URL.