---
title: "How to embed YouTube Shorts"
slug: "embed-youtube-shorts"
description: "Using the quick workaround using the iframe (Inline frame) HTML tag, you can embed any YouTube Shorts in your page or article."
tags: ["Customization", "Embedding", "Videos"]
updated: 2026-06-10T07:17:56Z
published: 2026-06-10T07:17:56Z
canonical: "docs.document360.com/embed-youtube-shorts"
---

> ## Documentation Index
> Fetch the complete documentation index at: https://docs.document360.com/llms.txt
> Use this file to discover all available pages before exploring further.

# How to embed YouTube Shorts

YouTube Shorts can be embedded in your articles using an HTML iframe. Although YouTube does not currently provide a direct embed option for Shorts, you can display them by modifying the video URL, replacing `/shorts/` with `/embed/`, and inserting it into an iframe. This gives you full control over the dimensions, border, and styling of the embedded video.

---

## When to use this technique

- **Embedding short-form video content**: display product walkthroughs, quick tips, or announcements created as YouTube Shorts directly within your articles.
- **Supplementing written steps with video**: embed a Shorts video alongside a procedure to give readers a visual walkthrough without leaving the page.

:::(Info) ( <span class="fa-regular fa-circle-exclamation" data-type="icon"></span> NOTE)
YouTube does not currently offer a native embed option for Shorts. This workaround works by replacing `shorts` with `embed` in the video URL. If YouTube adds official Shorts embedding in future, that method should be used instead.
:::

---

## How to embed a YouTube Short

1. Go to [YouTube](https://www.youtube.com/) and open the Shorts video you want to embed.
2. Copy the video URL using one of the following methods:
   - Copy the URL from the address bar of your browser.
   - Click **Share** > **Copy**.
3. Paste the copied URL into the `src` field of the iframe code above.
4. In the URL, replace `/shorts/` with `/embed/`.

   For example:

   ```
   Before: https://www.youtube.com/shorts/pVRefGmQDJM
   After:  https://www.youtube.com/embed/pVRefGmQDJM
   ```

<img src="https://cdn.document360.io/860f9f88-412e-4570-8222-d5bf2f4b7dd1/Images/Documentation/Embed%20youtube%20shorts.gif" class="article_image" alt="Screen recording showing a YouTube Shorts URL being modified by replacing the word shorts with embed before pasting into an iframe.">

5. Paste the completed iframe code into your article using the code view or HTML block.

---

## Quick reference

Replace `<Shorts_video_code>` with your video's ID (the alphanumeric code at the end of the Shorts URL).

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

| Field | Default | Notes |
|---|---|---|
| `width` | `315` | Adjust as needed, maintain the aspect ratio |
| `height` | `560` | Optimal height for Shorts portrait format |
| `src` | Your video URL | Replace `/shorts/` with `/embed/` in the URL |
| `frameborder` | `0` | Set in pixels, `0` removes the border |

---

## Example

**Code:**

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

**Output:**

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

---

## Scope and coverage

| Item | Detail |
|---|---|
| Recommended size | 315px × 560px (portrait, matches Shorts 9:16 aspect ratio) |
| Custom sizes | Supported, adjust width and height, but maintain the 9:16 ratio |
| Editor support | Any editor that supports HTML iframe tags |
| Native embed option | Not currently available for YouTube Shorts |

---

## Best practices

- **Always maintain the 9:16 aspect ratio**: Shorts are filmed in portrait format. If you resize the frame, keep the width-to-height ratio at 9:16 (for example, 270×480 or 360×640) to prevent the video from appearing stretched or cropped.
- **Use `frameborder="0"`**: setting the border to zero gives a cleaner look. If you want a visible border, use CSS on a wrapper `<div>` rather than the `frameborder` attribute, which is deprecated in HTML5.
- **Set `allowfullscreen`**: this attribute lets readers expand the video to full screen, which improves the viewing experience for content with small on-screen text or detail.
- **Test the embed before publishing**: after inserting the iframe, preview the article to confirm the video loads correctly. If the video shows an error, double-check that `/shorts/` has been fully replaced with `/embed/` in the URL.
- **Keep video titles descriptive**: the `title` attribute on the iframe is read by screen readers. Replace `"YouTube video player"` with a descriptive title such as `"Product setup walkthrough"` to improve accessibility.