Skip to contenthtml html
Embed YouTube videos
Use a Custom Liquid block to add a YouTube video anywhere in Keystone where blocks are supported.
Add a YouTube embed
- In Shopify admin, go to Online Store > Themes.
- Click Customize on your active Keystone theme.
- Navigate to the section where you want to show the video.
- Add a Custom Liquid block.
- In YouTube, open your video, click Share > Embed, and copy the embed code.
- Paste the embed code into the Custom Liquid block, then save.
Example:
<span>
<iframe
width="560"
height="315"
src="https://www.youtube.com/embed/ALiyPTbL8Rg?si=rQKonpMMXeYSjJGC"
title="YouTube video player"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
referrerpolicy="strict-origin-when-cross-origin"
allowfullscreen
></iframe>
</span>
Make the video full width (optional)
If you want the video to scale to the full width of its container, wrap each embed in a .video-wrapper element and add the CSS below.
<style>
.video-wrapper {
position: relative;
padding-bottom: 56.25%; /* 16:9 ratio */
height: 0;
overflow: hidden;
margin-bottom: 20px; /* spacing between videos */
}
.video-wrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 0;
}
</style>
<div class="video-wrapper">
<!-- Paste your YouTube embed code here -->
<iframe
src="https://www.youtube.com/embed/ALiyPTbL8Rg?si=rQKonpMMXeYSjJGC"
title="YouTube video player"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
referrerpolicy="strict-origin-when-cross-origin"
allowfullscreen
></iframe>
</div>
Support note: If the responsive styling does not apply, place the
<style>block before the first<div class="video-wrapper">block in your Custom Liquid content.
To add multiple videos, repeat the `
...
` block for each video.