• +91-9142290450

  • Hajipur, Bihar, 844101

☰
❮
❯

HTML Youtube

← Previous Next →

When you want to include YouTube videos inside your webpage, HTML makes the process simple. YouTube provides an embed code, and you place that code inside your HTML file using an iframe. This allows visitors to watch the video directly on your website without leaving your page. In this chapter, you will learn how to embed a YouTube video, customize its size, control playback behaviour and create responsive video layouts.

What is YouTube Embed Code

YouTube gives a special code called an embed code. This code uses an iframe and loads the video player inside your webpage. When you open any video on YouTube, you can click Share and then choose Embed. YouTube will show you a small piece of HTML that you can paste into your website. The browser loads the video player from YouTube’s server, so it does not increase your website file size.

A basic YouTube embed code looks like this:

<iframe width="560" height="315" src="https://www.youtube.com/embed/nHrxSxwUHkA" frameborder="0" allowfullscreen></iframe>

This code displays a video player that is 560 pixels wide and 315 pixels tall. The src attribute contains the embed link. This is the video URL that loads the YouTube player.

How to Embed a YouTube Video in HTML

To embed a YouTube video, you simply copy the embed code and paste it inside your HTML body. You can place it wherever you want the video to appear. Here is a simple example:

<!DOCTYPE html>
<html>
<head>
    <title>Embedding YouTube Video</title>
</head>
<body>

<h2>YouTube Video Example</h2>

<iframe width="560" height="315" src="https://www.youtube.com/embed/nHrxSxwUHkA" frameborder="0" allowfullscreen></iframe>

</body>
</html>

When you open this file in a browser, you will see the embedded YouTube player. Clicking the play button will start the video immediately.

Changing Video Size

Sometimes you may want a smaller or larger video player depending on your page layout. You can change the width and height of the iframe. For example, if you want a wider video on a page designed for desktop screens, you can set width to 800 and height to 450:

<iframe width="800" height="450" src="https://www.youtube.com/embed/nHrxSxwUHkA" frameborder="0" allowfullscreen></iframe>

Many developers prefer maintaining the same width-to-height ratio to avoid distortion. Most YouTube videos follow a 16:9 ratio. If you change width, update height accordingly.

Responsive YouTube Video

On modern websites, pages must look good on all screen sizes including mobiles, tablets and desktops. Fixed width and height values do not adjust on small screens. To make the video responsive, you can place the iframe inside a container and use CSS to create a flexible layout.

Here is one common responsive method:

<style>
.video-box {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
}
.video-box iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
</style>

<div class="video-box">
    <iframe src="https://www.youtube.com/embed/nHrxSxwUHkA" frameborder="0" allowfullscreen></iframe>
</div>

The video now adjusts automatically to any screen size. This is useful when designing interfaces for students or trainees accessing your website through mobile phones in cities like Mumbai, Chennai or Lucknow.

Removing Video Suggestions

Sometimes you may not want YouTube to show recommended videos at the end. You can control this using a parameter in the video URL. Add ?rel=0 to the embed link:

<iframe src="https://www.youtube.com/embed/nHrxSxwUHkA?rel=0" frameborder="0" allowfullscreen></iframe>

This keeps the viewer focused on the current content instead of other suggestions.

Controlling Autoplay

Autoplay allows the video to start playing automatically when the page loads. Use the autoplay parameter with value 1:

<iframe src="https://www.youtube.com/embed/nHrxSxwUHkA?autoplay=1" frameborder="0" allow="autoplay" allowfullscreen></iframe>

Autoplay can be helpful for landing pages or tutorial demos, but use it carefully because some users may find it distracting.

Hiding Player Controls

If you want a cleaner display without YouTube’s default controls, you can hide them. Add controls=0:

<iframe src="https://www.youtube.com/embed/nHrxSxwUHkA?controls=0" frameborder="0" allowfullscreen></iframe>

This is useful when embedding intro videos for institutions or events. The viewer will see only the video without play or pause buttons.

Starting Video at a Specific Time

Sometimes you want a video to start at a certain point. You can set a start time using the start parameter. The value is in seconds:

<iframe src="https://www.youtube.com/embed/nHrxSxwUHkA?start=60" frameborder="0" allowfullscreen></iframe>

This example begins playing from the 1-minute mark. It helps when you want to skip introductions and show only important sections.

Embedding YouTube Playlists

You can embed entire playlists on your webpage. This is helpful when you want to show a collection of lessons, tutorials or lectures.

<iframe width="560" height="315" src="https://www.youtube.com/embed/videoseries?list=PL12345ABCDE" frameborder="0" allowfullscreen></iframe>

The playlist ID replaces the video ID. The embedded player shows navigation buttons to move between videos.

Embedding YouTube Shorts

Short video formats are popular in India as well. YouTube Shorts can also be embedded, but you should use the normal embed link format:

<iframe width="560" height="315" src="https://www.youtube.com/embed/VIDEO_ID" frameborder="0" allowfullscreen></iframe>

Replace VIDEO_ID with the ID from the Shorts link.

Embedding YouTube Live Streams

You can also embed live streams on your website. This is useful for live classes, cultural events or announcements. The process is the same:

<iframe width="560" height="315" src="https://www.youtube.com/embed/LIVE_STREAM_ID" frameborder="0" allowfullscreen></iframe>

Live streams will play automatically when they begin.

Summary of HTML Youtube

In this chapter, you learned how to embed YouTube videos using iframe, customise width and height, create responsive layouts and use parameters like autoplay, controls, start time and playlist embedding. You also saw how to embed Shorts and live streams. With these techniques, you can include high-quality video content in your webpages and create a more engaging learning experience.

Practice Questions

Q1. Embed a YouTube video using the <iframe> tag.

Q2. Set a video size to 800px width and 450px height.

Q3. Enable fullscreen for the video.

Q4. Make the video autoplay on page load.

Q5. Remove controls from the video player.

Q6. Embed a YouTube video with looping enabled.

Q7. Make the embedded video responsive using CSS.

Q8. Display multiple YouTube videos on one page.

Q9. Use a YouTube embed code copied from the YouTube site.

Q10. Use the title attribute to describe the embedded video.

← Previous Next →

Try a Short Quiz.

coding learning websites codepractice

No quizzes available.

HTML

online coding class codepractice

HTML5 Basics

HTML Styling and Design

HTML Links and Media

HTML Layout and Structure

HTML Forms

HTML Graphics

HTML APIs

HTML Advanced Topics

codepractice logo
Login
Go Back Top