HTML Iframes - YouTube Video Attribute for Full Screen
When a YouTube video is embedded into an HTML page using an iframe, it is embedded using the default attributes.
Fullscreen is one such attribute, which will make the full-screen option available for the user.
By default, the fullscreen option is not included in the embedded video controls.
<iframe src="https://www.youtube.com/embed/5UMde7utfCI" title="YouTube Video" width="800" height="450"></iframe>
However, we can enable the option by passing an additional attribute allowfullscreen
to enable the full-screen option as shown below.
<iframe src="https://www.youtube.com/embed/5UMde7utfCI" title="YouTube Video" width="800" height="450" allowfullscreen></iframe>
Example
The below example contains two videos, the first one without and the other with the attribute allowfullscreen
, which enables a full-screen option on the embedded video.
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<h1>HTML Iframes YouTube Video With Full Screen</h1>
<h2>Default Parameters (without allowfullscreen)</h2>
<iframe src="https://www.youtube.com/embed/5UMde7utfCI" title="YouTube Video" width="800" height="450"></iframe>
<h2>With Allow Full Screen Attribute</h2>
<iframe src="https://www.youtube.com/embed/5UMde7utfCI" title="YouTube Video" width="800" height="450" allowfullscreen></iframe>
</body>
</html>
Overall
HTML Iframes can be used to embed a YouTube video and enable the full-screen option with an additional attribute.