Back to HTML HubPractice HTMLInterview HTML

Nearby lessons

15 of 24
HTML AudioHTML VideoHTML YoutubeHTML TablesHTML Forms

📺 Embedding YouTube Videos in HTML

📌 What is YouTube Embedding?

Learn how to embed YouTube videos in your web pages using the <iframe> tag, with customization options for autoplay, mute, controls, and more.

🔰 Basic Embed Example

Use the <iframe> tag with the YouTube video URL inside the src attribute.
Example02
🌐Code Cell
Loading Editor...
✏️ You can edit this code — click Run to refresh the preview.
Output

▶️ Autoplay with Muted Audio

Autoplay will only work in modern browsers if the video is muted.
Example03
🌐Code Cell
Loading Editor...
✏️ You can edit this code — click Run to refresh the preview.
Output

⛔ Hide Player Controls

You can hide the default YouTube controls by setting controls=0.
Example04
🌐Code Cell
Loading Editor...
✏️ You can edit this code — click Run to refresh the preview.
Output

🔧 URL Parameters for Customization

AttributeDescription
autoplay🎬 Start playback automatically
controls🎛️ Show or hide video controls
mute🔇 Mute the video on start
loop🔁 Play video in a loop
start⏩ Start video at specific time
end⏹️ Stop video at specific time
rel🚫 Show related videos after end
modestbranding🙈 Hide YouTube logo

🌟 Best Practices

  • ✅ Always set a descriptive title for accessibility
  • ✅ Add loading="lazy" to improve performance
  • ✅ Use rel=0 to prevent unrelated suggestions
  • ✅ Combine autoplay=1 with mute=1 if autoplay is needed
  • ✅ Use CSS for responsive iframe sizing instead of fixed width/height

🧠 Test Your Knowledge

5 Questions
Progress: 0 / 5