---
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
---
> ## 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.
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
```
1. 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).
```
```
| 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:**
```
```
**Output:**
[YouTube video player](https://www.youtube.com/embed/pVRefGmQDJM)
---
## 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.