Embedding YouTube Shorts on your website is a quick way to repurpose short-form video and keep visitors engaged. The process is similar to embedding any YouTube video — but the vertical 9:16 format creates a display problem that catches most people off guard. This guide walks you through grabbing the embed code, pasting it into HTML, WordPress, Squarespace, or Wix, and fixing the aspect ratio so your Short looks clean instead of squeezed between black bars.
How YouTube Shorts Embedding Works (And Why It’s Slightly Different)
YouTube Shorts use the same standard <iframe> embed method as regular YouTube videos. The difference is the URL format (youtube.com/shorts/[video-id]) and the 9:16 vertical aspect ratio. Paste the code without adjusting dimensions and the player defaults to a wide landscape layout — leaving your Short framed in black bars. This guide addresses both issues before they become a problem.
Step 1 — Get the Embed Code from YouTube
Getting the embed code takes about 30 seconds — but only on desktop. YouTube’s mobile interface hides the Embed option entirely, so open a browser on your computer before you start.
-
Go to youtube.com on a desktop browser.
-
Open the YouTube Short you want to embed.
-
Below the video, click the Share button (the arrow icon).
-
Copy the URL from the pop-up. You should get something like this: https://youtube.com/shorts/0vDjY69p0D
-
Replace /shorts/ with /embed/, making the URL into: https://youtube.com/embed/0vDjY69p0D
-
Add the URL to the “src” section in the code template below:
<iframe width="560" height="315"
src="https://www.youtube.com/embed/VIDEO_ID"
title="YouTube video player"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
allowfullscreen>
</iframe>
The VIDEO_ID in the src URL is the unique identifier for your Short — the same string that appears in its youtube.com/shorts/VIDEO_ID address.
Note: YouTube’s Embed dialog typically generates a /embed/VIDEO_ID URL rather than /embed/shorts/VIDEO_ID. Both formats work for embedding.
What the Embed Code Actually Contains
The src attribute points to the video. The width and height attributes control player dimensions — you’ll adjust these shortly. You can also append parameters like ?autoplay=1 or ?loop=1&playlist=VIDEO_ID directly to the src URL to customize playback behavior once the basic embed is working.
How to Embed YouTube Shorts in an HTML Website
If you manage a custom site or have direct access to your page’s HTML, embedding is straightforward. The critical step is adjusting the dimensions for a vertical display.
-
Open the HTML file or your CMS’s HTML editor.
-
Paste the iframe code inside the <body> element, wherever you want the Short to appear.
-
Update the dimensions. Replace the default width="560" height="315" with width="315" height="560".
Your adjusted iframe should look like this:
<iframe width="315" height="560"
src="https://www.youtube.com/embed/VIDEO_ID"
title="YouTube video player"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
allowfullscreen>
</iframe>
This creates a portrait-style player, but fixed pixel dimensions break on smaller screens. For a fully responsive result, use the CSS wrapper method below.
Fixing the Vertical Aspect Ratio with CSS
Fixed width and height values won’t scale on mobile devices. A responsive CSS wrapper solves this by locking the 9:16 ratio at any screen size — this is the most reliable method across all platforms.
HTML:
<div class="shorts-wrapper">
<iframe
src="https://www.youtube.com/embed/VIDEO_ID"
title="YouTube video player"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
allowfullscreen>
</iframe>
</div>
CSS:
.shorts-wrapper {
position:relative;
width:100%;
max-width:315px;/* limits player width on large screens */
aspect-ratio:9 / 16;/* locks vertical ratio */
margin:0auto;/* centers the player */
}
.shorts-wrapper iframe {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
border:0;
}
aspect-ratio: 9 / 16 is supported in all modern browsers. If you need to support older browsers, replace that line with padding-top: 177.78% on the wrapper div instead.
Pro Tip: Define this CSS once in your main stylesheet and reuse the shorts-wrapper class on every embed across your site — no need to repeat the styles each time.
How to Embed YouTube Shorts in WordPress
WordPress offers two reliable paths. The Custom HTML block method gives you full formatting control and is the better choice if the vertical layout matters.
Method 1: YouTube Embed Block (Quick Option)
-
Open your post or page in the Gutenberg block editor.
-
Click + to add a new block, then search for YouTube (or the generic Embed block).
-
Paste the Short’s full URL (e.g., https://www.youtube.com/shorts/VIDEO_ID) into the block field.
-
Press Enter — WordPress auto-renders a preview.
-
In the block sidebar, set the aspect ratio to 9:16 if the option appears, or resize the block manually.
This method is fast but may default to a landscape ratio depending on your theme. If the result looks wrong, use Method 2.
Method 2: Custom HTML Block (Recommended)
-
Add a Custom HTML block in the Gutenberg editor.
-
Paste the full responsive iframe + CSS wrapper code from the previous section.
-
Click Preview in the editor to verify the vertical layout before publishing.
Classic Editor users: Switch to Text view and paste the iframe code directly at the cursor position.
How to Embed YouTube Shorts in Squarespace and Wix
Squarespace
-
In the page editor, click + and select Embed.
-
Click the pencil icon to edit the block, then paste the full iframe code into the embed field.
-
Save and preview to confirm the vertical layout.
Note: Squarespace’s native Video Block accepts a YouTube URL but forces a 16:9 landscape display. Use the Embed Block with iframe code for proper vertical formatting.
Wix
-
In the Wix Editor, go to Add, then under “From the web” click “HTML Code”.
-
Paste the iframe code into the HTML editor.
-
Resize the element on the canvas to match a vertical portrait shape.
Wix’s built-in video block does not preserve the 9:16 ratio for Shorts — the HTML embed route is the more reliable option.
Common Problems and Quick Fixes
|
Problem |
Fix |
|---|---|
|
Short displays as a wide landscape video with black bars |
Adjust iframe to width="315" height="560" or use the CSS wrapper method |
|
“Embed” option missing from the Share menu |
You’re on mobile — switch to a desktop browser |
|
Short plays but won’t loop like it does on YouTube |
Add ?loop=1&playlist=VIDEO_ID to the end of the src URL |
|
Video won’t load or shows an error |
The source video may be private or age-restricted — these cannot be embedded |
Frequently Asked Questions
Can I embed YouTube Shorts without showing the YouTube logo or controls?
No. YouTube’s Terms of Service require that the player controls and branding remain visible in all embedded players. Attempting to hide them by overlaying elements or manipulating CSS violates YouTube’s ToS and can result in your embed access being restricted or revoked.
Will an embedded YouTube Short autoplay on my website?
Not by default. You can request autoplay by appending ?autoplay=1 to the src URL, but most modern browsers block autoplay when sound is enabled. Using ?autoplay=1&mute=1 is far more reliable — muted autoplay is commonly permitted across browsers.
Do embedded YouTube Shorts count as views?
Yes. Plays through an embedded player count toward the video’s official YouTube view count, provided they meet YouTube’s minimum engagement threshold. Embedding Shorts on your website can meaningfully contribute to your overall video performance metrics.
Can I embed multiple YouTube Shorts on one page?
Yes — repeat the iframe or CSS wrapper code for each Short, swapping in the correct VIDEO_ID each time. For pages with five or more embeds, add loading="lazy" to each iframe tag to prevent all videos from loading at once and slowing your page speed.
Next Steps
The core workflow is two steps: get the embed code from YouTube on desktop, then fix the aspect ratio using either adjusted width/height values or the CSS wrapper. The CSS wrapper method is the most reliable option — it works in plain HTML, WordPress, and any site builder that accepts custom code. Once your embeds are live, make sure what you’re featuring is worth watching — every video you embed is a direct reflection of your brand to site visitors.
