• +91-9142290450

  • Hajipur, Bihar, 844101

☰
❮
❯

HTML Youtube

← Previous Next →

🔹 What is YouTube Embedding?

YouTube embedding allows you to display and play a YouTube video directly inside your web page using the <iframe> tag. This method is commonly used to show tutorials, product videos, and more.

🔹 Basic Syntax
<iframe width="560" height="315"
src="https://www.youtube.com/embed/VIDEO_ID"
title="YouTube video player"
frameborder="0"
allowfullscreen></iframe>

Replace VIDEO_ID with the actual YouTube video ID.

🔹 Example: Embed a YouTube Video
<iframe width="560" height="315" 
src="https://www.youtube.com/embed/tgbNymZ7vqY" 
title="YouTube Video Player" frameborder="0" 
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" 
allowfullscreen></iframe>

🔹 How to Get the YouTube Embed Code

  1. Go to the YouTube video.

  2. Click the Share button.

  3. Click on Embed.

  4. Copy the <iframe> code provided.

  5. Paste it into your HTML page.

🔹 Customizing the Embed

  • Width and Height: Control the size.

  • allowfullscreen: Enables full-screen mode.

  • Add Parameters:

    • ?autoplay=1: Auto-plays the video.

    • ?controls=0: Hides controls.

    • ?loop=1&playlist=VIDEO_ID: Loops the video.

Example with Autoplay and Loop:

<iframe width="560" height="315" 
src="https://www.youtube.com/embed/tgbNymZ7vqY?autoplay=1&loop=1&playlist=tgbNymZ7vqY" 
frameborder="0" allowfullscreen></iframe>

🔹 Making the YouTube Video Responsive

Use a wrapper with CSS to make it scale on all devices:

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

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

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 →

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