HTML Project - Embedding a YouTube Video in HTML

Learn how to embed a YouTube video into your HTML webpage using the <iframe> tag. This tutorial provides a simple and effective way to display videos on your website.

Step 1: Create an HTML File

Create a new file and name it video.html.


Step 2: Add the Basic HTML Structure

Set up the basic HTML structure.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Embedding a YouTube Video</title>
</head>
<body>
    <!-- Content will go here -->
</body>
</html>


Step 3: Embed the YouTube Video

Inside the <body> tag, use the <iframe> tag to embed a YouTube video.

<body>
    <h1>Watch This Amazing Video</h1>
<iframe width="560" height="315" src="https://www.youtube.com/embed/qURP4ErcMWw?si=rigPUOFMgHDJJ3hS" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
</body>
  • <iframe>: Used to embed content like videos.
  • width and height: Set the size of the video.
  • src: The URL of the video to embed (replace with your own video URL).
  • allowfullscreen: Allows the video to be played in fullscreen mode.


Final Code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Embedding a YouTube Video</title>
</head>
<body>
    <h1>Watch This Amazing Video</h1>
    <iframe width="560" height="315" src="https://www.youtube.com/embed/qURP4ErcMWw?si=rigPUOFMgHDJJ3hS" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
</body>
</html>