How to Embed a YouTube Video in Shopify: 3 Simple Ways
You can embed a YouTube video in Shopify from the theme editor, a product description, or custom Liquid. Here is each method and the speed cost to watch for.
Product video is one of the few things that reliably lifts conversion on a product page. Getting one onto a Shopify store takes about two minutes.
Here are the three ways to embed a YouTube video in Shopify, and the performance trade-off nobody mentions.
What Is the Easiest Way to Embed a YouTube Video in Shopify?
The easiest way to embed a YouTube video in Shopify is the native Video section in the theme editor. Go to Online Store > Themes > Customize, add a Video section, paste the YouTube URL, and save. No code, and the theme handles responsive sizing for you.
Every Online Store 2.0 theme includes this section.
Method 1: The Native Video Section
- From your admin, go to Online Store > Themes.
- Click Customize on your live theme.
- Pick the page you want the video on from the dropdown at the top.
- Click Add section and choose Video.
- Paste your YouTube URL into the video field.
- Set a cover image if the section offers one, then Save.
Use this whenever it is available. The theme's own markup handles mobile sizing, lazy loading, and aspect ratio without you writing anything.
The cover image setting is worth using. A custom thumbnail beats YouTube's auto-generated frame almost every time, and it keeps the section looking intentional rather than pasted in.
Method 2: Inside a Product Description
For a video that belongs to one specific product, put it in the description.
- Open the product in Products.
- In the description editor, click the Insert video button, or switch to the HTML view using the
<>icon. - Paste your YouTube embed code.
Grab the embed code from YouTube by clicking Share, then Embed, then copying the iframe.
The raw version looks like this:
<iframe
width="560"
height="315"
src="https://www.youtube.com/embed/VIDEO_ID"
title="Product demo video"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope"
allowfullscreen>
</iframe>
Replace VIDEO_ID with the string after v= in your YouTube URL.
That fixed width and height is a problem on mobile. See the responsive fix below.
Method 3: Custom Liquid, for Full Control
When you need the video somewhere the theme has no section for, use a Custom Liquid section.
<style>
.yt-embed-wrap {
position: relative;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
max-width: 100%;
}
.yt-embed-wrap iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 0;
}
</style>
<div class="yt-embed-wrap">
<iframe
src="https://www.youtube-nocookie.com/embed/VIDEO_ID"
title="Product demo video"
loading="lazy"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope"
allowfullscreen>
</iframe>
</div>
That wrapper is the standard responsive video pattern. The 56.25% padding is a 16:9 aspect ratio, and the absolutely positioned iframe fills it at any screen width.
Three details in there worth keeping: loading="lazy" defers the iframe until it is near the viewport, youtube-nocookie.com uses YouTube's privacy-enhanced domain, and the title attribute is required for accessibility.
Embedded Video Is Not Free
A YouTube iframe pulls in a substantial amount of JavaScript from Google's servers. Put three on a page and your load time goes somewhere you will not like.
Three habits keep it under control:
- One video per page. If you think you need four, you need a gallery page instead.
- Always set
loading="lazy". The native Video section does this for you. Manual embeds do not unless you add it. - Check the result. Run the page through PageSpeed Insights before and after. If the score drops hard, consider a click-to-play thumbnail that only loads the iframe on interaction.
Product pages carry your revenue. A video that lifts conversion by a few percent and costs you two seconds of load time is not obviously a win, so measure it rather than assuming.
Should You Host on YouTube or Upload to Shopify?
Shopify lets you upload video directly to Files and serve it from their CDN. That avoids the YouTube player entirely and usually loads faster.
Use Shopify-hosted video for short silent product loops. Use YouTube when you want the video discoverable in YouTube search, when it is long enough that streaming quality matters, or when you are reusing one video across several channels.
For a 12 second product spin, upload to Shopify. For a three minute founder story you also want ranking on YouTube, embed it.
The Takeaway
To embed a YouTube video in Shopify, use the native Video section when your theme has one, a product description for product-specific video, and Custom Liquid with a responsive wrapper when you need control. Keep it to one video per page and lazy load every iframe.
If page speed is already a concern, my guide to making a Shopify store faster covers the bigger wins. And for the CSS side of custom sections, I broke that down here.
More notes
How to Pause Your Shopify Store: 2 Options and What They Cost
Shopify gives you two ways to pause a store, and they behave very differently. Here is what each one keeps, what it kills, and which to pick.
ShopifyHow to Use CSS in a Shopify Section: 3 Clean Methods
There are three ways to add CSS to a Shopify section, and only one of them scopes cleanly to that section. Here is how to do it without breaking your theme.
ShopifyWhat Payment Processor Does Shopify Use? An Honest Breakdown
Shopify's own processor is Shopify Payments, and it runs on Stripe's infrastructure. Here is what that means for your rates, your payouts, and your options.
ShopifyCan You Use Your Own Payment Processor on Shopify? The Real Answer
Yes, you can use your own payment processor on Shopify. Shopify charges you an extra transaction fee for the privilege. Here is when that trade is worth making.
