How to Embed YouTube Shorts On Website? [2026]

Your best YouTube Shorts shouldn’t stop getting attention once someone leaves YouTube. Adding them to your website can put that content in front of visitors who may never reach your channel, while making your pages more engaging. You can embed YouTube Shorts on website pages using YouTube’s native embed code when you want to show an individual Short. For multiple videos, a widget can display YouTube Shorts on a website as a dynamic feed. This guide explains how to embed YouTube Shorts, make them responsive, add multiple Shorts, and set them up across popular website platforms. 

TL;DR

Embed YouTube Shorts on Website

Youtube
Channel

Youtube
Playlist

Youtube
Keywords

Youtube
Shorts

Try Now

How to Embed YouTube Shorts on a Website

The best approach depends on what you want to display. To embed YouTube Shorts individually, YouTube’s native embed code is usually enough. If you want to add YouTube Shorts to website pages in bulk or keep the content updated, a widget can handle the feed for you. You also do not need the YouTube API for these basic embedding methods.

Method 1. Using YouTube’s Native Embed Code

YouTube’s native code works well when you want to embed Shorts from YouTube individually without adding a separate feed. It is also the most direct option if you are looking for a simple way to YouTube embed shorts on a webpage.

1. Open the YouTube Short you want to add to your website.
2. Right-click directly on the playing video and choose the “Copy embed code” option.
3. Paste the iframe code into your website’s HTML editor or a supported code block.
4. Adjust the iframe’s width and height if needed, keeping the vertical 9:16 format in mind.
5. Save or publish the page and check how the Short appears on your website.

The embed code contains a unique video ID that tells YouTube which Short to load. If you want to embed another video later, you can replace the video ID with the ID from the new Short.

YouTube Shorts Embed Code Example

If you want to embed YouTube Shorts manually, you can use a standard YouTube iframe and replace the video ID with your own.

<div style="max-width:315px; aspect-ratio:9/16; margin:0 auto;">
<iframe width="100%"
height="100%"
src="https://www.youtube.com/embed/<Shorts_video_code>"
title="YouTube Short"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen></iframe>
</div>
    

Replace YOUR_VIDEO_ID with the ID of the Short you want to display. The 9:16 aspect ratio keeps the embed suited to the vertical format of YouTube Shorts.

Method 2. Embedding Multiple YouTube Shorts Using a Widget

If you want to display several Shorts together, adding individual iframe codes can quickly become difficult to manage. A YouTube Shorts widget lets you collect multiple videos into one display and manage them from a single place.

For example, Tagembed provides a no-code option for creating a YouTube Shorts feed and adding it to your website. You can connect your YouTube source, select the Shorts you want to display, customize their appearance, and then add the generated widget to your page.

This approach can also complement YouTube automation tools by giving the content you publish on YouTube another place to appear.

Create Your YouTube Shorts Feed

1. Sign up for a Tagembed account or log in to your existing account.

2. Choose YouTube as your source and select Shorts.

3. Enter the URL of the YouTube channel you want to collect Shorts from.

4. Click Create Feed and let Tagembed fetch the available videos.

5. Review the collected content in the widget editor before publishing.

Your connected YouTube Shorts feed then populates the YouTube Shorts widget with the videos you want to display. You can also use similar social media widgets to bring content from other platforms into your website.

Customize and Moderate Your Shorts

Once your feed is ready, adjust its appearance before publishing it.

1. Open the customization or layout settings.
2. Choose a theme and layout that suits your page.
3. Adjust card styles, backgrounds, fonts, and other visual elements.
4. Review the collected Shorts and hide anything you do not want to publish.
5. Use moderation settings to filter unwanted content automatically where needed.

These settings give you more control over what visitors see and how the YouTube Shorts widget for the website fits into the rest of your page.

Generate the YouTube Shorts Embed Code

After setting up the feed, generate the code that will connect it to your website.

1. Open the Publish option in the widget editor.
2. Select Website as the publishing destination.
3. Choose the layout or gallery type you want to use.
4. Set the widget’s width and height if required.
5. Click Generate Code and copy the provided code.

You can then use this YouTube Shorts embed code on the website platform of your choice. The generated embed code for YouTube Shorts carries the widget configuration you created.

Add the Widget to Your Website

The final step is to place the widget where visitors can see it.

1. Open the webpage where you want to add the widget.
2. Find the HTML, Embed, Code, or similar element provided by your website builder.
3. Paste the generated code into that area.
4. Save or publish the page.
5. Refresh the website and check the widget on both desktop and mobile.

This lets you add YouTube Shorts to website pages without adding each video separately. When your connected feed updates, the YouTube Shorts widget for the website can reflect the available content without requiring you to replace every individual embed.

You can use the same setup when you want to embed a YouTube channel on website pages and showcase more than just Shorts.

Method 3. Using a WordPress Plugin

A WordPress plugin can be a convenient option if you manage your website primarily from the WordPress dashboard. Instead of working with embed code manually, the plugin handles the connection and display within WordPress.

With the Tagembed WordPress Plugin, you can connect your YouTube content and add the resulting feed to a WordPress page. This approach works particularly well when you plan to update or manage the feed regularly.

Method 4. Using a Shopify App

Shopify users can use an app when they want to add YouTube content without repeatedly editing their theme code.

With the Tagembed Shopify App, you can connect your YouTube content, configure its appearance, and add the resulting display to your store. This can work well for pages where you want to showcase Shorts alongside your products or other store content.

How to Embed YouTube Shorts on Different Website Platforms

Most website builders let you add YouTube Shorts through an HTML, Embed, Code, or similar element. The exact option varies by platform, but the basic process stays the same. If you are adding a feed rather than a single Short, the process can also vary depending on the platform. For example, you can use a dedicated approach to a YouTube feed on Google Sites when you want to display multiple videos together. 

A quick tip for better Shorts display

YouTube Shorts use a vertical 9:16 format, so avoid placing them inside a wide, landscape video container. If the Short looks cropped or leaves too much empty space, adjust the iframe or its container dimensions to better match the vertical format.

For mobile visitors, use a responsive container rather than fixed dimensions wherever possible. This allows the Short to resize with the available screen space without disrupting the rest of the page.

YouTube Shorts Embed Code vs YouTube Shorts Widget

Both options let you display Shorts on your website, but they suit different needs. A YouTube Shorts embed code works well when you need to display one specific video. A YouTube Shorts widget makes more sense when you want to display multiple Shorts and manage them from one place.

For displaying one specific Short, a YouTube Shorts embed code keeps the setup straightforward. When you regularly publish Shorts or want to display several videos together, a YouTube Shorts widget offers a simpler way to manage the content over time.

If you also want to bring content from other social platforms into the same website, a social media aggregator can help you manage those feeds from one place.

Common Problems When Embedding YouTube Shorts

Even when you embed YouTube Shorts correctly, a few display or playback issues can still occur. Here are the most common ones and how to fix them.

Short Appears in Landscape

Use a vertical container instead of a standard 16:9 video frame. Shorts use a 9:16 format, so matching that ratio helps preserve the intended display.

Black Bars Appear Around the Video

This usually happens when the player and its container use different aspect ratios. Adjust the container dimensions and remove unnecessary padding around the embed.

Short Does Not Load

Check whether the video is public and allows embedding. Private, age-restricted, or embedding-restricted videos may not play on your website. Testing another public Short can help confirm whether the issue is specific to the video.

Embed Is Not Responsive

Fixed iframe dimensions can cause the Short to overflow or appear too small on mobile devices. Use a responsive container that adjusts to the available screen width.

Video Dimensions Look Wrong

Check the width and height in your YouTube Shorts embed code. A wide or overly short container can make the video look stretched, cropped, or leave unnecessary space.

Some Shorts Cannot Be Embedded

Not every Short can play through an embedded player. If embedding is disabled or the video has playback restrictions, you cannot display it normally on your website. Try another Short to confirm the restriction.

Benefits of Embedding YouTube Shorts

Embedding Shorts lets you extend the value of your existing video content to your website. The benefits go beyond simply adding more visuals to a page.

• Boost Engagement: Short videos give visitors something quick to watch as they browse. Placing relevant Shorts alongside your written content can break up long sections and make the page easier to explore.
• Reuse Content: You can display YouTube Shorts on website pages without creating new videos specifically for them. Product demos, quick tips, tutorials, and behind-the-scenes clips can add useful information to pages that already exist.
• Showcase YouTube: Embedding Shorts gives website visitors a glimpse of what you publish on YouTube. A useful or interesting video can lead them to explore more of your channel and contribute to your YouTube shorts views.
• Support Context: A Short can explain something that is difficult to communicate through text alone. For example, a product demonstration can show how something works, while a quick tutorial can clarify a process without adding another long section to the page.
• Refresh Content: Adding new Shorts gives frequently visited pages fresh visual content without requiring a complete redesign. You can also embed social media feeds to bring regularly updated content from other platforms into relevant website pages.

Final Thoughts

YouTube Shorts can be more useful when they are not limited to your YouTube channel. A quick tutorial, product demo, or behind-the-scenes clip can also make a relevant website page more useful and engaging.

If you only want to feature one video, embed YouTube Shorts directly on the page. If you regularly publish Shorts or want to show several videos together, a YouTube Shorts widget can make it easier to keep the content organized and updated.

The main thing is to choose Shorts that add something to the page. When the video supports the content visitors are already reading, it feels like a natural part of the website rather than something added just for the sake of having a video.