Embed YouTube videos

Use a Custom Liquid block to add a YouTube video anywhere in Space where blocks are supported.

Add a YouTube embed

1. In Shopify admin, go to Online Store > Themes.

2. Click Customize on your active Space theme.

3. Navigate to the section where you want to show the video.

4. Add a Custom Liquid block.

5. In YouTube, open your video, click Share > Embed, and copy the embed code.

6. 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 <div class="video-wrapper">...</div> block for each video.