Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to add a YouTube Video to your Website?
To add a YouTube video to your website, you need to embed it using the <iframe> element. The src attribute contains the video URL, while the width and height attributes control the video player dimensions.
YouTube provides an embed URL that differs from the regular viewing URL. Instead of using the standard watch URL, you must use YouTube's embed URL format for proper integration into your webpage.
Syntax
Following is the basic syntax for embedding a YouTube video −
<iframe width="560" height="315" src="https://www.youtube.com/embed/VIDEO_ID" frameborder="0" allowfullscreen></iframe>
Replace VIDEO_ID with the actual YouTube video ID found in the video URL.
Getting the YouTube Embed Code
To get the correct embed code for any YouTube video, follow these steps −
-
Navigate to the YouTube video you want to embed
-
Click the Share button below the video
-
Select Embed from the sharing options
-
Copy the provided
<iframe>code -
Paste the code into your HTML document
Basic YouTube Video Embed
Example
Following example shows how to embed a YouTube video in an HTML page −
<!DOCTYPE html>
<html>
<head>
<title>YouTube Video Embed</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h1>Learn HTML5 Tutorial</h1>
<p>Watch this comprehensive HTML5 tutorial:</p>
<iframe width="560" height="315"
src="https://www.youtube.com/embed/qz0aGYrrlhU"
frameborder="0"
allowfullscreen>
</iframe>
</body>
</html>
This creates a standard-sized video player embedded directly in your webpage. The video loads and plays within the iframe without redirecting users to YouTube.
Responsive YouTube Video Embed
To make your YouTube video responsive and adapt to different screen sizes, you can use CSS to create a flexible container.
Example
<!DOCTYPE html>
<html>
<head>
<title>Responsive YouTube Video</title>
<style>
.video-container {
position: relative;
width: 100%;
height: 0;
padding-bottom: 56.25%; /* 16:9 aspect ratio */
}
.video-container iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
</style>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Responsive Video Player</h2>
<div class="video-container">
<iframe src="https://www.youtube.com/embed/qz0aGYrrlhU"
frameborder="0"
allowfullscreen>
</iframe>
</div>
</body>
</html>
The responsive container maintains a 16:9 aspect ratio and scales the video player to fit different screen sizes while preserving the video proportions.
YouTube Embed Parameters
YouTube embed URLs accept various parameters to customize video behavior. Add parameters to the URL using ? for the first parameter and & for additional parameters.
Example − Custom Parameters
<!DOCTYPE html>
<html>
<head>
<title>YouTube with Parameters</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Video with Custom Settings</h2>
<iframe width="560" height="315"
src="https://www.youtube.com/embed/qz0aGYrrlhU?autoplay=1&mute=1&start=30&controls=1"
frameborder="0"
allow="autoplay; encrypted-media"
allowfullscreen>
</iframe>
</body>
</html>
This example includes parameters to autoplay the video (muted), start at 30 seconds, and show player controls. The allow attribute grants necessary permissions for autoplay functionality.
Common YouTube Embed Parameters
Following are frequently used YouTube embed parameters −
| Parameter | Description | Example |
|---|---|---|
| autoplay | Auto-starts video (1=yes, 0=no). Requires mute=1. | autoplay=1 |
| mute | Mutes audio on start (1=yes, 0=no). | mute=1 |
| start | Start time in seconds. | start=30 |
| end | End time in seconds. | end=120 |
| controls | Show player controls (1=yes, 0=no). | controls=0 |
| loop | Loop the video (1=yes, 0=no). | loop=1 |
Multiple Videos Example
Example
<!DOCTYPE html>
<html>
<head>
<title>Multiple YouTube Videos</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h1>Tutorial Playlist</h1>
<h3>HTML Basics</h3>
<iframe width="400" height="225"
src="https://www.youtube.com/embed/qz0aGYrrlhU"
frameborder="0" allowfullscreen>
</iframe>
<h3>CSS Fundamentals</h3>
<iframe width="400" height="225"
src="https://www.youtube.com/embed/1PnVor36_40"
frameborder="0" allowfullscreen>
</iframe>
</body>
</html>
You can embed multiple YouTube videos on the same page by using separate <iframe> elements for each video, creating a custom playlist experience.
Conclusion
Embedding YouTube videos requires using the <iframe> element with YouTube's embed URL format (https://www.youtube.com/embed/VIDEO_ID). You can customize video behavior using URL parameters and create responsive designs with CSS. Always use the embed URL rather than the regular YouTube watch URL for proper functionality.
954 Views
