Introduction

It’s 2019, pictures are out and videos are in. If a picture is worth 1,000 words, than how many words is a video worth? 1 million? Depends on the length? Quite often, a client will ask us if there is any way they can embed YouTube videos within the pages of their Shopify store. Seems like a simple enough request, why wouldn’t you want a living, breathing, moving image for your product? However, this does present one or two obstacles to overcome from a development standpoint, but with creative usage of Shopify sections, and some Liquid magic we can easily make this happen.

The main challenge is that the conventional method to embed a video on a website that YouTube offers is through the use of embed code in this format:

<iframe width="560" height="315" src="https://www.youtube.com/embed/xxxxxxxxxxx" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>

This is inserted into the page content and renders the video in an iframe. For developers, this is not a problem, but a typical Shopify store owner is likely to have little to no knowledge of embed code or have any idea of what to do with it on their own.
In order to put the power back in the clients hands, a much more user friendly approach is to enable users to use the direct URL of a Youtube video instead, and have it render within an iframe exactly like the default embed code method.

The Solution

So how do you implement such a perfectly efficient custom option for your client? Here’s a demonstration of how to do this through a simple example page containing a video with some standard content below it.

The first thing we want to do is create a new page template and a new section which we will save as video.liquid.

This section needs to contain a single text field video_url so that the user can enter the YouTube URL in the theme editor.

It also needs to render the URL into an iframe - and this is where the aforementioned Liquid code comes into the equation.

The full section file looks like this..

<div class="embed-responsive embed-responsive-16by9">
   {% assign videoId = section.settings.video_url | split: '?v=' %}
   <iframe width="560" height="315" src="https://www.youtube.com/embed/{{ videoId[1] }}" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
</div>

{% schema %}
  {
    "name": "Video",
    "settings": [
 {
          "type": "text",
          "id": "video_url",
          "label": "YouTube video URL"
       }
 ]
  }
{% endschema %}

This schema adds the field to the theme editor so that the user can add the YouTube video URL.

Now, it’s also important to add the markup above that to render the section. In order to do this, we place the iframe inside a standard Bootstrap 4 embed element which uses the classes embed-responsive embed-responsive-16by9. This makes the video iframe responsive and ensures that it scales correctly on all resolutions.

For the iframe itself we use the exact same overall format as the YouTube default embed code. We then need to grab the full URL from the video_url field and extract only the ID segment of it. To use a generic example, if the full URL is https://www.youtube.com/watch?v=xxxxxxxxxxxx then the ID segment is xxxxxxxxxxx. The way we do this is to use Shopify’s split filter to convert the video_url value from its current string format, to an array which we call videoId in this instance. Since the ID segment is the second part of the videoId array, we simply have to append it to the iframe’s src value as videoId[1].

Almost done! The next step is to create our page template, which we can see below.

{{ page.title }}
{% section 'video' %}
{{ page.content }}

In order to do this, we place the title first, followed by the video via the {% section 'video' %} include, and finally the standard page content below the video.
The final step is to create a page, set it to use this template, and enter a title and some basic lorem ipsum content.

The Finished Product

If you followed all of these steps correctly, you should see something that looks like this in your Shopify page.

By following these steps and taking the time to set this up for your client (or yourself if you are the developer of your own store) you can eliminate the time it takes to manually embed videos every time you or your client want a new video posted in your Shopify store.

Videos are exciting, they draw the eye, they bring life to inanimate product listings, and as your client’s Shopify store grows, they will only have more and more reasons to inject video content into their product offerings.
So get ahead of the curve, set yourself up for success, and give your client the power to customize their page and communicate 1 million words with every product they list.