HTML YouTube – Solved Practice Questions

By /

Introduction

HTML YouTube videos can be embedded into HTML webpages using the <iframe> element. You can control the video’s width, height, autoplay, fullscreen mode, and other settings. In this chapter, you’ll practice embedding YouTube videos with beginner-friendly solved examples.

Question 1

Problem Statement

Embed a YouTube video on a webpage.

HTML Code

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

    <h1>My Favorite Video</h1>

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

</body>
</html>

Output

My Favorite Video

[Embedded YouTube Video]

Step-by-Step Explanation

  • <iframe> embeds another webpage inside your page.
  • width sets the video width.
  • height sets the video height.
  • Replace VIDEO_ID with the actual YouTube video ID.

Question 2

Problem Statement

Embed a YouTube video with playback controls.

HTML Code

<!DOCTYPE html>
<html>
<head>
    <title>YouTube Controls</title>
</head>
<body>

    <h1>HTML Tutorial</h1>

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

</body>
</html>

Output

HTML Tutorial

[Embedded YouTube Video]

Step-by-Step Explanation

  • allowfullscreen lets the viewer switch the video to fullscreen mode.
  • The embedded player displays YouTube’s built-in playback controls by default.
  • Replace VIDEO_ID with a valid YouTube video ID.

Question 3

Problem Statement

Embed a YouTube video that starts automatically.

HTML Code

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

    <h1>Welcome Video</h1>

    <iframe
        width="560"
        height="315"
        src="https://www.youtube.com/embed/VIDEO_ID?autoplay=1&mute=1"
        allow="autoplay"
        allowfullscreen>
    </iframe>

</body>
</html>

Output

Welcome Video

[Embedded YouTube Video]

Step-by-Step Explanation

  • autoplay=1 requests automatic playback.
  • mute=1 starts the video without sound.
  • Many browsers only allow autoplay when the video is muted.
  • allow="autoplay" grants autoplay permission to the embedded content.

Question 4

Problem Statement

Embed a YouTube video that starts playing at 60 seconds.

HTML Code

<!DOCTYPE html>
<html>
<head>
    <title>Start Time</title>
</head>
<body>

    <h1>Video Starts at 1 Minute</h1>

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

</body>
</html>

Output

Video Starts at 1 Minute

[Embedded YouTube Video]

Step-by-Step Explanation

  • start=60 asks the embedded player to begin at 60 seconds.
  • Replace 60 with another value to change the starting time.
  • Replace VIDEO_ID with the ID of the YouTube video.

Question 5

Problem Statement

Embed a YouTube video with a custom width and height.

HTML Code

<!DOCTYPE html>
<html>
<head>
    <title>Video Size</title>
</head>
<body>

    <h1>HTML Course Video</h1>

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

</body>
</html>

Output

HTML Course Video

[Large Embedded YouTube Video]

Step-by-Step Explanation

  • width changes the width of the embedded video.
  • height changes the height of the embedded video.
  • Choose dimensions that match the video’s aspect ratio for the best viewing experience.

Question 6

Problem Statement

Embed a YouTube playlist on a webpage.

HTML Code

<!DOCTYPE html>
<html>
<head>
    <title>YouTube Playlist</title>
</head>
<body>

    <h1>HTML Video Playlist</h1>

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

</body>
</html>

Output

HTML Video Playlist

[Embedded YouTube Playlist]

Step-by-Step Explanation

  • videoseries is used to embed a YouTube playlist.
  • Replace PLAYLIST_ID with the actual playlist ID.
  • Users can watch multiple videos without leaving the webpage.
  • allowfullscreen enables fullscreen viewing.

Question 7

Problem Statement

Embed a YouTube video that supports fullscreen mode.

HTML Code

<!DOCTYPE html>
<html>
<head>
    <title>Fullscreen Video</title>
</head>
<body>

    <h1>Watch in Fullscreen</h1>

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

</body>
</html>

Output

Watch in Fullscreen

[Embedded YouTube Video]

Step-by-Step Explanation

  • allowfullscreen allows the video to open in fullscreen mode.
  • Users can click the fullscreen button in the player.
  • Replace VIDEO_ID with the desired YouTube video ID.

Question 8

Problem Statement

Create a responsive YouTube video that adjusts to different screen sizes.

HTML Code

<!DOCTYPE html>
<html>
<head>
    <title>Responsive YouTube Video</title>

    <style>
        .video-container {
            position: relative;
            width: 100%;
            max-width: 800px;
            padding-bottom: 56.25%;
            height: 0;
        }

        .video-container iframe {
            position: absolute;
            width: 100%;
            height: 100%;
            border: none;
        }
    </style>

</head>
<body>

    <h1>Responsive YouTube Video</h1>

    <div class="video-container">

        <iframe
            src="https://www.youtube.com/embed/VIDEO_ID"
            allowfullscreen>
        </iframe>

    </div>

</body>
</html>

Output

Responsive YouTube Video

[Responsive Embedded YouTube Video]

Step-by-Step Explanation

  • The container keeps a 16:9 aspect ratio.
  • The iframe fills the entire container.
  • The video automatically adjusts to different screen sizes.
  • This technique is commonly used in responsive websites.

Question 9

Problem Statement

Embed a YouTube video using lazy loading.

HTML Code

<!DOCTYPE html>
<html>
<head>
    <title>Lazy Loading Video</title>
</head>
<body>

    <h1>HTML Tutorial</h1>

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

</body>
</html>

Output

HTML Tutorial

[Embedded YouTube Video]

Step-by-Step Explanation

  • loading="lazy" delays loading the iframe until it is close to being visible on the screen.
  • Lazy loading can improve page loading performance.
  • It is especially useful on pages containing multiple embedded videos.

Question 10

Problem Statement

Create a complete YouTube video section with a heading, description, responsive embedded video, and fullscreen support.

HTML Code

<!DOCTYPE html>
<html>
<head>
    <title>Complete YouTube Embed</title>

    <style>
        .video-container {
            position: relative;
            width: 100%;
            max-width: 800px;
            padding-bottom: 56.25%;
            height: 0;
        }

        .video-container iframe {
            position: absolute;
            width: 100%;
            height: 100%;
            border: none;
        }
    </style>

</head>
<body>

    <h1>HTML Video Tutorial</h1>

    <p>Watch this HTML lesson on YouTube.</p>

    <div class="video-container">

        <iframe
            src="https://www.youtube.com/embed/VIDEO_ID"
            loading="lazy"
            allowfullscreen>
        </iframe>

    </div>

</body>
</html>

Output

HTML Video Tutorial

Watch this HTML lesson on YouTube.

[Responsive Embedded YouTube Video]

Step-by-Step Explanation

  • <iframe> embeds the YouTube video.
  • The responsive container adjusts to different screen sizes.
  • loading="lazy" improves page performance.
  • allowfullscreen enables fullscreen playback.
  • Replace VIDEO_ID with a valid YouTube video ID.

Key Takeaways

  • YouTube videos are embedded using the <iframe> element.
  • src specifies the YouTube embed URL.
  • width and height control the player’s size.
  • allowfullscreen enables fullscreen viewing.
  • autoplay=1 requests automatic playback.
  • mute=1 is commonly used with autoplay.
  • start begins the video at a specific time.
  • loading="lazy" improves page loading performance.
  • Responsive containers help videos fit different screen sizes.
  • YouTube playlists can also be embedded.

Frequently Asked Questions (FAQs)

1. Which HTML element is used to embed a YouTube video?

The <iframe> element is used to embed YouTube videos.

2. What is the YouTube embed URL format?

https://www.youtube.com/embed/VIDEO_ID

3. What does allowfullscreen do?

It allows users to watch the embedded video in fullscreen mode.

4. How do you start a YouTube video automatically?

Use:

?autoplay=1&mute=1

Modern browsers are generally more likely to allow autoplay when the video starts muted.

5. How do you start a video at a specific time?

Use:

?start=60

This requests playback beginning at 60 seconds.

6. What does loading="lazy" do?

It delays loading the iframe until it is close to entering the viewport, which can improve page performance.

7. Can I embed a YouTube playlist?

Yes. Use the playlist embed URL with a valid playlist ID.

8. Why should I make YouTube videos responsive?

Responsive videos automatically adjust to different screen sizes, improving the experience on mobile devices, tablets, and desktops.

9. Can I change the size of an embedded YouTube video?

Yes. Use the width and height attributes or CSS.

10. Do I need JavaScript to embed a YouTube video?

No. A basic YouTube embed only requires an <iframe> element.

Written by Shubhranshu Shekhar, who has trained 20000+ students in coding.

Related Posts

Scroll to Top