How to Embed a YouTube Shorts Video in HTML

Want to bring your best YouTube Shorts directly into your website or blog post? Embedding them is a fantastic way to boost engagement and keep visitors on your site longer. This guide will walk you through exactly how to embed a YouTube Shorts video in HTML, from the simple copy-and-paste method to the pro tricks that give you a perfectly vertical, responsive player.

Why Bother Embedding YouTube Shorts on Your Website?

Before jumping into the "how," let's quickly cover the "why." Plopping a video onto your website isn't just about filling space, it's a strategic move that can significantly benefit your brand and marketing efforts. For content creators and businesses, embedded Shorts act as a powerful bridge between your YouTube channel and your home on the web.

• Boost On-Page Engagement: Video is sticky. A well-placed Short can grab a visitor's attention and keep them on your page for longer, which sends positive signals to search engines about your content's quality. Instead of just describing a product feature, you can show it in action with a 30-second clip.
• Enhance Your Content: Shorts can add dynamic, visual context to your articles. Writing a tutorial about a certain software? Embed a Short showing a quick tip. Sharing a recipe? A quick video of the final product makes it much more appealing. They break up long walls of text and make your content more digestible and engaging.
• Drive Traffic to Your YouTube Channel: Every embedded video is a potential gateway to your YouTube channel. When a visitor enjoys your embedded Short, they're just one click away from your full library of content. This cross-promotion helps grow your subscriber base organically by capturing your existing website audience.
• Showcase Social Proof: Do you have video testimonials from happy customers or user-generated content featuring your brand? Embedding these Shorts on product pages or your homepage is powerful social proof that builds trust far more effectively than a simple text quote.

Method 1: The Standard YouTube Embed (The Fast and Easy Way)

Let's start with the most direct method, which involves grabbing the code straight from YouTube. This process takes less than a minute and requires no coding knowledge.

Step-by-Step Instructions

1. Find Your Short on Desktop: Open your web browser (like Chrome, Firefox, or Safari) and navigate to the YouTube Short you want to embed. You must be on the desktop version of YouTube for the 'Embed' option to be available.
2. Click the "Share" Button: Just below the video player, you’ll see the "Share" button. Click on it.
3. Select "Embed": A popup will appear with several sharing options. Look for the first option on the left with the code icon labeled "<, >, Embed." Click this.
4. Copy the HTML Code: You’ll now see a new window with a snippet of HTML code, typically starting with <,iframe.... You can customize a few options here, such as starting the video at a specific time, but for now, just click the "COPY" button on the bottom right.
5. Paste the Code into Your Website's HTML: Go to the backend of your website, whether that’s a WordPress page, a Shopify product description, or any HTML file. Wherever you can edit the HTML or source code, simply paste the code you just copied.

The code you paste will look something like this:

<,iframe width="560" height="315" src="https://www.youtube.com/embed/YOUR_VIDEO_ID" title="YouTube video player" frameborder="0" allow="accelerometer, autoplay, clipboard-write, encrypted-media, gyroscope, picture-in-picture, web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen>,<,/iframe>,

When you save your page, the video will appear. Simple enough, right? Well, there’s one big problem with this standard method when it comes to Shorts...

The Problem: The Dreaded Black Bars

If you followed the steps above, you've probably noticed that your beautiful, vertical YouTube Short is now trapped inside a rectangular, horizontal (16:9) video player. This results in big, ugly black bars on either side of your video, completely ruining the native vertical experience of a Short. It looks unprofessional and feels out of place.

This happens because YouTube uses the same generic embed code for all videos - long-form and Shorts alike. The default player is designed for standard horizontal videos. To get that crisp, professional vertical look, you need to make a small manual adjustment.

Method 2: Creating a True Vertical Player (The Professional Fix)

Fixing the black bar issue is incredibly easy. All it takes is swapping two numbers in the embed code. The goal is to change the <,iframe>, container from a horizontal 16:9 aspect ratio to a vertical 9:16 aspect ratio.

How to Adjust the Iframe Dimensions

Step 1: Get the Standard Embed Code Again

Go back to your YouTube Short and copy the standard embed code just like you did in the first method.

Step 2: Find the `width` and `height` Attributes

In the code snippet, locate the `width` and `height` attributes. By default, they will look like this:

width="560" height="315"

Step 3: Swap the Values

Simply swap these two numbers. Set the `width` to "315" and the `height` to "560". This simple change transforms the player's shape from horizontal to vertical.

Your adjusted code should now look like this:

<,iframe width="315" height="560" src="https://www.youtube.com/embed/YOUR_VIDEO_ID" title="YouTube video player" frameborder="0" allow="accelerometer, autoplay, clipboard-write, encrypted-media, gyroscope, picture-in-picture, web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen>,<,/iframe>,

When you paste this updated code into your site, the video player will now be a perfect vertical rectangle, and your Short will display exactly as intended, without any annoying black bars. You can use other values as well, as long as they maintain a 9:16 aspect ratio (e.g., width="360" height="640").

Making Your Embedded Short Responsive

You’ve got a vertical player, but there's one more best practice to follow. Using fixed pixel values like `width="315"` isn’t ideal for modern, responsive websites. On a small mobile screen, that player might be too wide, and on a large desktop screen, it might look tiny. We can solve this with a little bit of CSS to make the player automatically resize while maintaining its vertical aspect ratio.

This technique is often called the "CSS aspect ratio box" trick.

Step 1: Wrap the `iframe` in a `div`

First, remove the `width` and `height` attributes directly from your `

Your HTML should now look like this:

<,div class="short-container">,
<,iframe src="https://www.youtube.com/embed/YOUR_VIDEO_ID" title="YouTube video player" frameborder="0" allow="accelerometer, autoplay, clipboard-write, encrypted-media, gyroscope, picture-in-picture, web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen>,<,/iframe>,
<,/div>,

Step 2: Add the Magic CSS

Now, add the following CSS rules to your website's stylesheet. If you're using a platform like WordPress, you can often add this to the "Additional CSS" section in the theme customizer.

.short-container {
position: relative,
padding-top: 177.77%, /* This is the magic number (560 / 315 * 100) */
height: 0,
overflow: hidden,
max-width: 315px, /* Set a max-width for larger screens */
margin: 0 auto, /* Center the container */
}

.short-container iframe {
position: absolute,
top: 0,
left: 0,
width: 100%,
height: 100%,
}

What This CSS Does:

• `.short-container`: We create a flexible container. The `padding-top: 177.77%` is the key: it forces the container's height to always be 177.77% of its width, which perfectly matches a 9:16 aspect ratio.
• `max-width: 315px`: This prevents the player from becoming enormously tall on large desktop screens. It will stay at a reasonable size, but will shrink down gracefully on smaller screens.
• `.short-container iframe`: The `position: absolute` part tells the `

Bonus: Customizing Player Behavior with URL Parameters

Want to control how your embedded Shorts player behaves? You can add parameters to the end of the `src` URL in your `

To add a parameter, add a question mark (`?`) after the video ID, followed by the parameter. To add multiple parameters, separate them with an ampersand (`&,`).

Here are some of the most useful ones:

• Autoplay the video: autoplay=1. Note: Most modern browsers will only autoplay videos if they are muted. To do this, you have to add &,mute=1.
• Loop the video: loop=1. For this to work, you also need to add the `playlist` parameter and set it to your video's ID: &,playlist=YOUR_VIDEO_ID.
• Hide player controls: controls=0. This will hide the play/pause button, volume control, and progress bar, giving a cleaner look.

Here’s an example `iframe` with all these parameters in use, set to autoplay muted, loop continuously, and hide the controls:

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

By combining these methods, you can add dynamic, perfectly formatted, and fully responsive YouTube Shorts that seamlessly integrate into any page on your website.

Final Thoughts

Embedding a YouTube Short is straightforward once you know the tricks. While the default YouTube embed code works, taking a moment to adjust the iframe dimensions from a horizontal to vertical aspect ratio makes a huge difference in presentation. By adding some simple CSS, you can ensure your vertical video looks fantastic on any device, from a wide desktop monitor to a small smartphone screen.

While embedding Shorts on your website is great for engaging site visitors, managing the creation and consistent scheduling of those Shorts is another story. We built Postbase because we were tired of legacy social media tools that treat modern content like an afterthought. Our platform is designed for short-form video first, allowing you to plan your content calendar, schedule TikToks, Reels, and Shorts easily, and see analytics that actually help you create better content - all without a clunky interface that feels stuck in 2010.