How to embed a Youtube video in a HTML page
As a web developer, you may want to embed a YouTube video and show it on your web page instead of directing users to view it on YouTube.
This is a very easy and straightforward process but can be a bit challenging if you are doing it for the very first time.
In this article, I'll take you through the steps to embed a YouTube video in an HTML page.
Embedding a YouTube video on a web page
Follow the step-by-step process below:
Step 1: Find the video on YouTube that you want to embed
Go to the YouTube website and search for the video you want to embed. Once you have found the video, click the "Share" button below the video player.
Step 2: Select the embed option
A pop-up modal will open with a number of sharing options. Click on the "Embed" option, this will display the video embed code.
Step 3: Copy the video embed code
Click on the embed code on the right side of the modal to select it. Then, click on the "Copy" button at the bottom-right corner of the modal to copy the code.
Alternatively, you can use the "Ctrl+C" or "Command+C" keyboard shortcut, or right-click on the code and select the "Copy" option of the context menu to copy the code.
Step 4: Adding the embed code to your HTML page
Open your HTML page in a text editor and paste the video embed code at the location where you want the video to appear.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>YouTube Video Embed</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
header {
background-color: #bbb;
color: #fff;
padding: 10px;
text-align: center;
}
h1{
font-size: 30px;
}
@media only screen and (min-width: 768px) {
section {
max-width: 1000px;
margin: 20px auto;
}
}
</style>
</head>
<body>
<header>
<h1>YouTube Video Embed</h1>
</header>
<section>
<iframe width="560" height="315" src="https://www.youtube.com/embed/HBxCHonP6Ro" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
</section>
</body>
</html>
In this example, I added the embed code within the <section> element. Save the changes, open the HTML page, and preview the page on a web browser.
You can further customize the video by adding additional, editing, or removing parameters in the embed code.
For example, you can change the size of the video player by modifying the values of width and height attributes in the embed code.
That's it! It's as simple as that. Now you can go ahead and try it in your project.
