This post goes over to how to embed a YouTube Short using an iframe.
Video ID
Copy the video ID from the URL. For example, the video ID is abc123 for the link below:
https://youtube.com/shorts/abc123
Also, make sure to copy the ID between the last / and ?:
https://youtube.com/shorts/abc123?si=def456
Embed
Now replace <VIDEO_ID> with the video ID:
<iframe
width="360"
height="640"
src="https://www.youtube.com/embed/<VIDEO_ID>"
title="YouTube Short"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
referrerpolicy="strict-origin-when-cross-origin"
allowfullscreen
></iframe>
For a bigger 16:9 player, you can replace the width and height with 405×720 or 450×800. For example:
<iframe
- width="360"
- height="640"
+ width="450"
+ height="800"
src="https://www.youtube.com/embed/<VIDEO_ID>"
title="YouTube Short"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
referrerpolicy="strict-origin-when-cross-origin"
allowfullscreen
></iframe>
If you want to center the video player horizontally, then add the attribute style="display: block; margin: 0 auto;":
<iframe
width="360"
height="640"
+ style="display: block; margin: 0 auto;"
src="https://www.youtube.com/embed/<VIDEO_ID>"
title="YouTube Short"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
referrerpolicy="strict-origin-when-cross-origin"
allowfullscreen
></iframe>
Demo
Here’s an example of an embedded YouTube Short:
<iframe
width="405"
height="720"
style="display: block; margin: 0 auto;"
src="https://www.youtube.com/embed/chYGYjH2E2c"
title="YouTube Short"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
referrerpolicy="strict-origin-when-cross-origin"
allowfullscreen
></iframe>