How to Embed a YouTube Video in HTML (and Make It Responsive)

- Andrés Cruz - ES En español

Inserting a YouTube video into your webpage is one of those tasks that seem simple... until problems arise: fixed sizes, non-responsive videos, parameters that nobody explains well. If you have ever wondered how to insert a YouTube video in HTML and make it look perfect on mobile, tablet, and desktop, you have come to the right place.

When I started, I fell into that trap too: I would copy the iframe as is, and then I had to struggle with it not adapting to mobile or the controls disappearing for no reason. That's why this guide brings together everything you need, from the basics to advanced configurations, so you can embed a YouTube video in HTML correctly on your first try.

What does "inserting a YouTube video" in HTML actually mean?

How the iframe works internally

When you click Share → Embed, YouTube gives you an HTML code block with an <iframe> element. That iframe is nothing more than a "window" inside your website that displays the YouTube player without you having to host the video on your own server.

For example, the YouTube embed code looks like this:

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

The src attribute is the only thing you need to change if you want to embed a different video. The rest of the attributes control the dimensions and behavior of the player.

Advantages of embedding a video instead of uploading it directly

Using the video directly from YouTube saves you tons of work:

  • You don't have to convert the video into multiple formats for compatibility with different browsers.
  • You don't consume your own bandwidth: YouTube absorbs all the traffic.
  • You benefit from YouTube's social features (likes, comments, subscriptions).
  • The player comes already optimized and updated for most browsers and devices.
  • The video remains available on YouTube for those who find it through the search engine.

How to get the code to insert a video in HTML from YouTube

The process is quick. Follow this path on YouTube:

  • Open the video you want to embed.
  • Click the Share button (below the player).
  • Select the Embed option.
  • Copy the iframe block that appears in the dialog box.

Where to paste the HTML code on your page

The iframe must always go inside the <body> tag, never in the <head>. A basic and functional example would be:

<body>
    <h1>My YouTube video</h1>
    <iframe width="560" height="315" src="https://www.youtube.com/embed/YOUR_ID" allowfullscreen></iframe>
</body>

YouTube is a digital content platform where you can find all kinds of videos. In recent years it has grown in all aspects, offering very practical options to easily insert videos into an HTML web page:

How to insert a YouTube video in HTML: Share and Embed button

Select a YouTube video → click "Share" → click the "Embed" tab.

Once you have the code of the video you want to embed on your webpage, you will get something similar to this:

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

By using YouTube videos directly, you can save a lot of work; for example, avoiding converting videos to different formats to support various browsers, taking advantage of YouTube's social options to share and spread content, and forgetting about storage and bandwidth costs.

Most common mistakes when copying the YouTube embed

  • Pasting the iframe inside <head> instead of <body>.
  • Breaking the URL by adding parameters with the ? sign twice (only one is used, the rest are chained with &).
  • Accidentally deleting the allowfullscreen attribute, which prevents full-screen mode.
  • Confusing the standard YouTube URL (https://www.youtube.com/watch?v=ID) with the embed URL (https://www.youtube.com/embed/ID): you must always use the /embed/ version.

Analyzing the attributes of the YouTube iframe

The code you get from YouTube is nothing more than a standard HTML iframe with a series of attributes that are good to know well:

  • The width and height attributes specify the initial dimensions of the video in pixels. YouTube uses 560 and 315 by default (16:9 ratio), but you can change or remove them if you use responsive CSS.
  • The allowfullscreen attribute enables full-screen mode. Without it, the full-screen button disappears.
  • The src attribute contains the URL of the video in embed format. It is the only value you must change to embed a different video. In addition, in that URL you can add extra parameters to customize the behavior of the player, as we will see next.

Customizing the iframe: URL parameters of YouTube videos

One of the most powerful parts —and least documented in basic tutorials— is the ability to add parameters to the src URL to control player behavior. Here are the most important ones:

autohide — Controls when the video controls are hidden:
  • autohide=0: controls are always visible.
    <iframe src="https://www.youtube.com/embed/85MppyLJHz0?autohide=0" allowfullscreen></iframe>
  • autohide=1: controls are hidden upon playback start.
    <iframe src="https://www.youtube.com/embed/85MppyLJHz0?autohide=1" allowfullscreen></iframe>
  • autohide=2 (default): behavior varies depending on the video ratio. For 16:9 and 4:3 it acts like autohide=1; for any other ratio, like autohide=0.
    <iframe src="https://www.youtube.com/embed/85MppyLJHz0?autohide=2" allowfullscreen></iframe>
autoplay — Defines whether the video plays automatically on load:
  • autoplay=0 (default): the video does not start by itself.
    <iframe src="https://www.youtube.com/embed/85MppyLJHz0?autoplay=0" allowfullscreen></iframe>
  • autoplay=1: the video starts automatically. Keep in mind that modern browsers may block autoplay with sound; it is recommended to combine it with mute=1.
    <iframe src="https://www.youtube.com/embed/85MppyLJHz0?autoplay=1&mute=1" allowfullscreen></iframe>
controls — Controls the visibility of player buttons:
  • controls=0: no controls are shown; the player loads automatically.
    <iframe src="https://www.youtube.com/embed/85MppyLJHz0?controls=0" allowfullscreen></iframe>
  • controls=1 (default): controls are shown and the player loads automatically.
    <iframe src="https://www.youtube.com/embed/85MppyLJHz0?controls=1" allowfullscreen></iframe>
  • controls=2: controls are shown, but the player only loads when the user initiates playback (improves load time).
    <iframe src="https://www.youtube.com/embed/85MppyLJHz0?controls=2" allowfullscreen></iframe>
loop — Specifies whether the video should repeat in a loop when finished:
  • loop=0 (default): the video does not repeat.
    <iframe src="https://www.youtube.com/embed/85MppyLJHz0?loop=0" allowfullscreen></iframe>
  • loop=1: the video repeats indefinitely. For it to work correctly in embed, you must also add the playlist parameter with the same video ID.
    <iframe src="https://www.youtube.com/embed/85MppyLJHz0?loop=1&playlist=85MppyLJHz0" allowfullscreen></iframe>
playlist — Allows creating a chained playlist. Separate video IDs with commas (,).It is also necessary for loop=1 to work properly in embed mode.
showinfo — Controls whether the video title is displayed (deprecated in modern API, but useful in older embeds):<iframe src="https://www.youtube.com/embed/85MppyLJHz0?showinfo=1" allowfullscreen></iframe>
disablekb — Disables (1) or enables (0) the player's keyboard shortcuts:<iframe src="https://www.youtube.com/embed/85MppyLJHz0?disablekb=1" allowfullscreen></iframe>
start — Specifies (in seconds) the start point of the video. Useful for highlighting a specific part:<iframe src="https://www.youtube.com/embed/85MppyLJHz0?start=5" allowfullscreen></iframe>
end — Specifies (in seconds) the point at which the player stops:<iframe src="https://www.youtube.com/embed/85MppyLJHz0?end=60" allowfullscreen></iframe>
rel — Controls suggested videos at the end of playback:rel=0: shows only videos from the same channel (since 2018, it is not possible to completely hide them).
<iframe src="https://www.youtube.com/embed/85MppyLJHz0?rel=0" allowfullscreen></iframe>
mute — Mutes the video audio on load:mute=1: essential when using autoplay=1, since browsers block autoplay with sound.
<iframe src="https://www.youtube.com/embed/85MppyLJHz0?autoplay=1&mute=1" allowfullscreen></iframe>

You can find the official and complete documentation at: YouTube Embedded Players and Player Parameters.

Summary: most used display settings

  • autohide
    • autohide=0 → Controls always visible
    • autohide=1 → Hidden upon playback
    • autohide=2 → Behavior based on video ratio (default value)

  • Example:

    <iframe src="https://www.youtube.com/embed/ID?autohide=1" allowfullscreen></iframe>
  • controls
    • controls=0 → No visible controls
    • controls=1 → Visible (default value)
    • controls=2 → Only shown when the user interacts
  • showinfo (deprecated in modern embeds, but functional in some cases):
    • showinfo=0 → Removes the video title
    • showinfo=1 → Shows the title

Summary: playback parameters (autoplay, loop, start, end)

  • Autoplay:

    <iframe src="https://www.youtube.com/embed/ID?autoplay=1&mute=1" allowfullscreen></iframe>

  • loop — To make it work in embed, you must also add the playlist parameter with the same ID:

    <iframe src="https://www.youtube.com/embed/ID?loop=1&playlist=ID" allowfullscreen></iframe>

  • start / end — Perfect if you want to highlight a specific fragment of the video:

    <iframe src="https://www.youtube.com/embed/ID?start=5&end=20"></iframe>

  • Advanced combination — Autoplay, controls-free, and looped:

    <iframe src="https://www.youtube.com/embed/ID?autoplay=1&mute=1&controls=0&loop=1&playlist=ID" allowfullscreen></iframe>

How to make the video responsive: adapting to mobile and large screens

How to embed a responsive YouTube video: two solutions with CSS and JavaScript

YouTube allows you to insert videos in HTML easily, but what is not so obvious is getting that video to behave in a responsive way: that is, to automatically adapt to the width of the container according to the device screen size.

When I inserted my first videos, YouTube delivered them to me with fixed dimensions like width="560" and height="315".
The result on mobile devices was disastrous: they overflowed the container or were framed with black bars.

Here are two proven solutions to fix this permanently.

The root problem is that the HTML code to insert a YouTube video comes with a predefined size indicated by the height and width attributes. This causes the video to completely ignore your website's responsive design. Below we will look at two solutions that you can apply separately or together.

First solution: responsive video with CSS (quick and simple)

The classic technique consists of wrapping the iframe in a div container and using the proportional padding-bottom trick to maintain the aspect ratio:

.v-container {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 ratio */
    padding-top: 25px;
    height: 0;
}
.v-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

The 56.25% value corresponds to the 16:9 ratio (9 / 16 = 0.5625). The container has height: 0 and grows exclusively through padding-bottom, which allows the absolutely positioned iframe to fill that space while always keeping the correct ratio, regardless of the available width.

HTML required for the responsive video with CSS

You can remove (or not) the width and height attributes that YouTube adds to the iframe, since CSS will take care of the dimensions. The final result would be:

<div class="v-container">
    <iframe
        src="https://www.youtube.com/embed/Me2aXBodqnA"
        frameborder="0"
        allow="autoplay; encrypted-media"
        allowfullscreen>
    </iframe>
</div>

And this is the result:

Adaptive YouTube video with CSS

You can check the example at:

Responsive example with CSS

Second solution: responsive video with JavaScript (ideal if you have multiple videos on the same page)

The CSS solution is fast, but it can cause problems if the videos have ratios different from 16:9. The JavaScript alternative is more robust: it detects the actual ratio of each video and dynamically rescales it every time the user resizes the window.

The first step is to select all YouTube iframe elements present on the page. We do this by using the containment selector *= on the src attribute:

var $videosYoutube = $("iframe[src*='www.youtube.com']")

In the example we use jQuery, but you can easily translate it to vanilla JavaScript if you prefer not to depend on external libraries. Next, we select the parent container of the videos:

$v_container = $("body section")

Then, we calculate and store the aspect ratio of each video as a custom attribute, and remove the fixed dimensions added by YouTube. This block runs only once, when the page loads:

$videosYoutube.each(function () {
    $(this)
        .attr('proportion', this.height / this.width)
        // We remove fixed dimensions
        .removeAttr('height')
        .removeAttr('width');
});

Finally, we define the callback for the window's resize event, which will rescale each video according to its ratio and the current container width:

$(window).resize(function () {
    $videosYoutube.each(function () {
        var $el = $(this);
        $el
            .width(container_width)
            .height(container_width * $el.attr('proportion'));
    });
})

The complete and ready-to-use code is as follows:

// We select all YouTube iframes
var $videosYoutube = $("iframe[src*='www.youtube.com']"),
    // Parent container of the videos
    $v_container = $("body section");

// We save the proportions and remove fixed dimensions
$videosYoutube.each(function () {
    $(this)
        .attr('proportion', this.height / this.width)
        .removeAttr('height')
        .removeAttr('width');
});

// Every time the window is resized, we rescale the videos
$(window).resize(function () {
    var container_width = $v_container.width();
    $videosYoutube.each(function () {
        var $el = $(this);
        $el
            .width(container_width)
            .height(container_width * $el.attr('proportion'));
    });
}).resize(); // We also execute on load

You can view the final example at:

Responsive example with JavaScript

These same codes work perfectly with other video platforms like Vimeo, since the logic relies on the iframe attributes, not specifically on the YouTube URL.

Download both examples (.rar)

Best practices for embedding YouTube videos in HTML

  • Recommended dimensions by device:
    • Desktop: between 560 and 800 px wide (always with a 16:9 ratio).
    • Mobile and tablet: always use the responsive technique (CSS or JS) to avoid overflows.
  • Performance optimization:
    • Use the loading="lazy" attribute on the iframe so the browser only loads the player when the user scrolls near it. This improves initial load time, especially on pages with multiple videos:
    • <iframe loading="lazy" src="https://www.youtube.com/embed/ID" allowfullscreen></iframe>
  • SEO and user experience:
    • Use a descriptive <h2> or <h3> heading right before the video so Google understands its context.
    • Add text before and after the video to contextualize it: Google cannot "see" videos, but it can read the text surrounding them.
    • Add the title attribute to the iframe to improve accessibility and crawling by search engines:
      <iframe title="Descriptive video title" src="https://www.youtube.com/embed/ID" allowfullscreen></iframe>

  • Enhanced privacy: YouTube offers the youtube-nocookie.com domain for embeds. When using it, YouTube does not store cookies on the visitor's browser until they play the video:

    <iframe src="https://www.youtube-nocookie.com/embed/ID" allowfullscreen></iframe>

Complete examples ready to copy

  • Basic embed — the essential minimum:

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

  • Custom embed — with autoplay (muted), controls, and start point:

    <iframe src="https://www.youtube.com/embed/ID?autoplay=1&mute=1&controls=1&start=10" allowfullscreen></iframe>

  • Responsive embed with CSS:

    <div class="v-container">
    <iframe src="https://www.youtube.com/embed/ID" allowfullscreen loading="lazy"></iframe>
</div>

  • Embed with enhanced privacy (no cookies until the user plays):

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

Extra: How to set a YouTube video as background audio

If what you need is not to display the video, but to play its background audio continuously, you can hide the iframe with CSS and combine the autoplay, loop, and mute=0 parameters:

<div style="display:none;">
    <iframe
        width="0"
        height="0"
        src="https://www.youtube.com/embed/VIDEO_ID?autoplay=1&loop=1&playlist=VIDEO_ID&mute=0"
        allow="autoplay">
    </iframe>
</div>

Keep in mind that modern browsers block autoplay with sound if the user has not previously interacted with the page. If the audio does not start on its own, it is likely a browser restriction, not an error in your code. In that case, you can trigger it via a button that initiates playback with JavaScript.

It is also important to know that even if the element has height="0" and width="0", the iframe still exists in the DOM. Make sure the parent container has display: none or visibility: hidden to prevent the browser from reserving strange extra whitespace, especially on mobile versions.

Frequently asked questions about embedding YouTube videos in HTML

  • Why is my YouTube iframe not responsive?
    • Because YouTube delivers the code with fixed dimensions (width and height) hardcoded directly into the iframe. To fix this, you need a container with a CSS-defined aspect ratio or a dynamic JavaScript resizing system, like the ones explained in this guide.
  • How to remove the YouTube player controls?
    • Add the controls=0 parameter to the src URL:
      <iframe src="https://www.youtube.com/embed/ID?controls=0" allowfullscreen></iframe>
  • How to prevent YouTube from showing suggested videos at the end?
    • Add rel=0 to the URL. Since 2018, YouTube no longer allows completely hiding suggested videos, but with rel=0 it will only show videos from the same channel instead of third-party videos:
      <iframe src="https://www.youtube.com/embed/ID?rel=0" allowfullscreen></iframe>
  • How to embed a YouTube video without ads?
    • It is not possible to remove YouTube ads from the embedded iframe. The ads that appear are controlled by the channel's monetization settings. The closest thing to reducing them is using the youtube-nocookie.com domain, which limits tracking cookies, although it does not eliminate advertising.
  • What is the difference between the regular YouTube URL and the embed URL?
    • The regular YouTube URL is https://www.youtube.com/watch?v=ID and is used to watch the video on the platform. The embed URL is https://www.youtube.com/embed/ID and is the one you should use in the src attribute of the iframe to embed it on your website.

✅ Conclusion

Embedding a YouTube video in HTML is not just copying an iframe: it is understanding how to customize it with parameters, how to make it responsive so it looks good on any device, and how to adapt it to the experience you want to offer on your website.

With the right parameters in the URL and a good responsive system —whether with CSS or JavaScript— you not only improve the aesthetics of your page: you also improve visitor retention, SEO, and the clarity of your content. The video stops being an element that "is simply there" and becomes an integrated and functional piece of your design.

Learn how to embed a YouTube video in HTML step by step. Includes code for iframes, advanced parameters, and how to make it responsive with CSS and JS.


Únete a la comunidad de desarrolladores que han decidido dejar de picar código y empezar a construir productos reales. Recibe mis mejores trucos de arquitectura cada semana:

I agree to receive announcements of interest about this Blog.

Web Atributo Video YouTube Propiedades CSS Responsive JavaScript

Your experience on this site will be improved by allowing cookies.