How to Embed YouTube Shorts on Your Website (Blogger + WordPress)
In this step-by-step guide, you’ll learn how to easily embed YouTube Shorts on your Blogger and WordPress websites — no coding experience needed!
Get the code
<div class="shorts-gallery">
<div class="short-item">
<iframe src="https://www.youtube.com/embed/kjY_IxMs3s4"
width="315" height="560"
frameborder="0" allowfullscreen></iframe>
</div>
<div class="short-item">
<iframe src="https://www.youtube.com/embed/GFi1127yW0w"
width="315" height="560"
frameborder="0" allowfullscreen></iframe>
</div>
<div class="short-item">
<iframe src="https://www.youtube.com/embed/OEio5Vbqy9Y"
width="315" height="560"
frameborder="0" allowfullscreen></iframe>
</div>
<div class="short-item">
<iframe src="https://www.youtube.com/embed/0NyIt0-K9I8"
width="315" height="560"
frameborder="0" allowfullscreen></iframe>
</div>
<div class="short-item">
<iframe src="https://www.youtube.com/embed/n70z_uksYzQ"
width="315" height="560"
frameborder="0" allowfullscreen></iframe>
</div>
<div class="short-item">
<iframe src="https://www.youtube.com/embed/lmQ-MqUAFas"
width="315" height="560"
frameborder="0" allowfullscreen></iframe>
</div>
</div>
<style>
.shorts-gallery {
display: flex;
flex-wrap: wrap;
gap: 20px;
justify-content: center;
max-width: 1050px;
}
.short-item {
position: relative;
flex: 1 1 315px;
max-width: 315px!important;
aspect-ratio: 9 / 16 !important;
overflow: hidden;
border-radius: 10px;
}
.short-item iframe {
position: absolute;
width: 100%!important;
height: 100%!important;
border: 0;
top: 0;
left: 0;
border-radius: 10px;
}
</style>Embedding YouTube Shorts on your Blogger or WordPress website is a quick and effective way to make your content more engaging and visually appealing. It’s also great for SEO, since Google loves multimedia-rich pages.
So, next time you publish a post — try adding a YouTube Short. Your audience (and your analytics) will thank you!