Embed YouTube Videos in HTML: A Step-by-Step Guide

calender-iconPublished: 25 May 2025

clock-icon5-min read

printer-icon whatsapp-icon share-icon



close-button
HTML
Table of Contents

INTRODUCTION

Embedding YouTube videos into your website is a simple yet powerful way to enhance user engagement and bring your content to life. Whether you're building a blog, portfolio, or business site, integrating videos can help explain concepts, showcase products, or share stories more effectively.

Embedding YouTube videos on a webpage offers several advantages, both technically and strategically:

  • Saves Bandwidth and Server Resources Videos are hosted on YouTube’s servers, not yours.
  • Fast and Reliable Streaming YouTube’s infrastructure ensures fast video delivery with adaptive streaming, which adjusts quality based on the viewer’s internet speed.
  • Improved User Engagement Videos are more engaging than text or static images.
  • SEO Benefits YouTube is owned by Google, and embedding can contribute to better search visibility.
  • Shareability and Social Proof Embedded videos often come with share buttons, increasing the chance of virality.

Steps to Embed YouTube Videos

1. Go to the YouTube video you want to embed.



2. Click the Share button under the video.



3. Click Embed.



4. Copy the HTML code.



5. Paste the HTML code into your webpage.

Example: 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Embedded YouTube Video</title>
</head>
<body>

  <h1>Watch This Video</h1>

  <iframe width="560" height="315" 
    src="https://www.youtube.com/embed/QdllBipwjT8?si=MQIKTYpr1bwjSJaB" 
    title="YouTube video player" 
    frameborder="0" 
    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" 
    allowfullscreen>
  </iframe>

</body>
</html>
Output:

Customize Youtube Video

You can customise YouTube videos by adding parameters to the URL of video. The parameters available are listed below.

  • autoplay
  • mute
  • controls
  • modestbranding
  • rel
  • loop
  • start
  • end
  • fs
  • playsinline

1. autoplay

This parameter auto-plays the video on load. The possible values it can are listed below

  • autoplay=1: Video starts playing automatically.
  • autoplay=0: Video doesn't play until the user clicks(default).

Example 

<iframe src="https://www.youtube.com/embed/dQw4w9WgXcQ?autoplay=1" width="560" height="315"></iframe>


2. mute

This parameter starts the video muted. The possible values it can are listed below

  • mute=1: : Starts the video muted (useful with autoplay)..
  • mute=0: Audio is on(default).

Example 

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


3. controls

This parameter can Show/Hide Player Controls. The possible values it can are listed below

  • controls=1: Show controls (default).
  • controls=0: Hide controls.

Example 

<iframe src="https://www.youtube.com/embed/dQw4w9WgXcQ?controls=0" width="560" height="315"></iframe>


4. modestbranding

This parameter reduces YouTube Branding. The possible values it can are listed below

  • modestbranding=1: Hide YouTube logo from the player bar.
  • modestbranding=0: Show YouTube branding(default).

Example 

<iframe src="https://www.youtube.com/embed/dQw4w9WgXcQ?modestbranding=1" width="560" height="315"></iframe>


5. rel

This parameter shows related videos at End. The possible values it can are listed below

  • rel=0: : Prevent showing unrelated videos at the end. (Now shows only videos from the same channel.).
  • rel=1: Show related videos at the end(default).

Example 

<iframe src="https://www.youtube.com/embed/dQw4w9WgXcQ?rel=0" width="560" height="315"></iframe>


6. loop

This parameter plays the Video in Loop This parameter requires additional info playlist=VIDEO_ID also. The possible values it can is listed below

  • loop=1: Loops the video.

Example 

<iframe src="https://www.youtube.com/embed/dQw4w9WgXcQ?loop=1&playlist=dQw4w9WgXcQ" width="560" height="315"></iframe>


7. start

This parameter tells the player when to begin the video. The value is in seconds. By default the video start at 0:00.

Example start=60: starts video at 1:00 minute (60 seconds in). 


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


8. end

This parameter tells the player when to stop the video. The value is also in seconds. It's optional—by default, the video plays till the end.

Example end=120: video will stop at 2:00 minutes. 


<iframe src="https://www.youtube.com/embed/dQw4w9WgXcQ?end=120" width="560" height="315"></iframe>


9. fs - Fullscreen Button Control

The fs parameter controls whether the fullscreen button is shown in the YouTube player. The possible values it can is listed below

  • fs=1: The fullscreen button is visible (default).
  • fs=0: The fullscreen button is hidden. Users cannot switch to fullscreen via the player.

Example 

<iframe src="https://www.youtube.com/embed/dQw4w9WgXcQ?fs=1" width="560" height="315"></iframe>


10. playsinline – Play Inline on Mobile Devices

By default, on iOS devices (iPhones and iPads), YouTube videos open in fullscreen when you play them. The playsinline parameter allows you to play the video within the page instead of going fullscreen.

  • playsinline=1: Video plays inline on iOS devices.
  • No playsinline: Video will open fullscreen on iOS when played.

Example 

<iframe src="https://www.youtube.com/embed/dQw4w9WgXcQ?modestbranding=1" width="560" height="315"></iframe>

Frequently Asked Questions (FAQ)

How to make an embedded Youtube video automatically start playing?
To make an embedded YouTube video automatically start playing when the page loads, you can add the autoplay=1 parameter to the video URL in the embed code. Here's how to do it: 


<iframe width="560" height="315" 
        src="https://www.youtube.com/embed/VIDEO_ID?autoplay=1" 
        frameborder="0" 
        allow="autoplay; encrypted-media" 
        allowfullscreen>
</iframe>