HTML Iframes - Embed YouTube Video

HTML Iframe element <iframe> can be used to embed a YouTube video into a web page.

This can be achieved by simply pointing the iframe source URL to YouTube video embed URL as shown below.

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

Always include the below details in the iframe element.

  • Include title, which will be used by screen readers
  • Define width and height values using the attributes directly or by using the style attribute, as it is needed to make the iframe displayed properly

YouTube Video ID

YouTube video ID is required to embed a YouTube video into a web page.

When you open a video to watch it on YouTube, the URL changes to something similar to the below URL in the browser which includes the video ID.

  • https://www.youtube.com/watch?v=BnDxeqzRqsM

When you click the share link on a YouTube video, the embed link includes the video ID.

  • https://youtu.be/BnDxeqzRqsM

Example

<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
    <h1>HTML Iframes YouTube Video</h1>
    <iframe src="https://www.youtube.com/embed/5UMde7utfCI" title="YouTube Video" width="800" height="450"></iframe>
</body>
</html>

Overall

HTML Iframes can be used to embed a YouTube video into a web page by pointing it to its embed URL.