Dynamic embedded videos in Shopify Blog articles

UPDATED

in

by

Rachel Simmons

Tags:

Do you have a Shopify site with video blogs as part of your content strategy?

Would you like Google to know your page has a video and show its thumbnail in search results, increasing the chance your article is clicked on?

You need a video schema added to the page.

Is your video embedded using an iframe? Both Youtube and Vimeo embed codes use iframes at the time of this writing.

Would you like to abide WCAG 2.0 (2.4.1 & 4.1.2) and allow screen reader users to know what the hell your iframe is for? Hint: yes.

Your video embed iframe needs a title attribute!

Method options

Manual

  • Manually add a video schema inside <script> tags to every page upon which you have a video.
  • Manually add a title=” ” attribute to your iframe embed code from Youtube or Vimeo.

This method works if you only have a few videos here and there.

Dynamic

  • Set up your article template to automatically:
    • Include a video schema
    • Include a title attribute in your iframe embed code

Nine times out of 10, I’m going to go with a dynamic method for something on a Shopify site. The client that I am working with has lots of videos within blog articles and so I wanted a solution that would make it easy and save time in the future. This article will cover my dynamic methods of adding a video schema and iframe title attributes to Shopify blog articles.

1. Add data to your articles using metafields

For the purposes of this tutorial I am going to be using Vimeo embeds as an example, but you could apply these same tactics for Youtube videos.

You need to add two metafields to your articles:

video.vimeo-id
video.duration

Vimeo ID metafield

Vimeo ID is simple, it’s the string of numbers in your vimeo video URL. You’ll notice this same string is used on the Vimeo page for the video (vimeo.com/###) as well as in the embed code URL (player.vimeo.com/video/###).

Duration metafield

Duration is a little more complicated but once you learn it, you’ll get the hang of it. Your duration needs to be in ISO 8601 format to be accepted by Google.

Sounds scary, but I learned about it so you don’t have to! If a video time is 5:32, the duration value would be PT5M32S. Let’s break that down:

  • PT = period of time (all durations start with this)
  • 5M = five minutes
  • 32S = 32 seconds

Easy, right?!

There’s other intricacies to know, like how to format hours or days (don’t make videos that long?), and whether or not you need a leading zero (you don’t).

2. Set up your article template to dynamically include a video schema

Add some code to your article template (or article template section). You need to conditionally call a snippet. The conditions here check to make sure the metafields both aren’t blank. If either of them are blank, it will not create a schema for that page. 

{% if article.metafields.video.duration != blank and article.metafields.video.vimeo-id != blank %}
{% include 'video-schema' %}
{% endif %}

And this is your snippet:

{% assign vimeo_prepend = "https://player.vimeo.com/video/" %}
{% assign vimeo_url = article.metafields.video.vimeo-id | prepend: vimeo_prepend %}
<script type="application/ld+json">
{
"@context": "https://schema.org",
      "@type": "VideoObject",
      "name": "{{ article.title | escape }}",
      "description": "{{ article.excerpt | strip_html | escape }}",
      "thumbnailUrl": "{{ article.image.src }}",
      "uploadDate": "{{ article.published_at }}",
      "duration": "{{ article.metafields.video.duration }}",
      "embedUrl": "{{ vimeo_url | escape }}"
}
</script>

You can read up on each of these structured data types if you want. The reason we need the Vimeo ID is because it wants the source file of the video, and since Vimeo is the one hosting it, they’re the source. But, adding this Vimeo ID pays off dividends when it comes to programmatically including the video in the article!

After you set all your metafields and add this code to your article template, check the frontend of an article and View Source. Ctrl-F schema and you should be able to find it!

You can also run it through Google’s Rich Results Testing Tool to ensure Google is picking up your schema.

3. Set up your article template to dynamically include a vimeo embed

I thought this part was super fun. So if you have lots of videos on your site, you might be in a situation where all of your <iframe> vimeo embeds are just manually pasted within the body of a blog article. That works, but you can’t do anything to it dynamically.

In this step, we are going to take the vimeo embed from living in the body of the blog article (known in liquid as article.content), to just before the body of a blog article! If you want your video placed in a different position on the page, you will need to modify this method to suit that.

Go to your article template (or article template section) and locate:

{{ article.content}}

Immediately before that, add this code to conditionally call a snippet.

{% if article.metafields.video.vimeo-id != blank %}
 {% include 'vimeo-embed' %}
 {% endif %}

This conditional statement wants to make sure Vimeo ID is not blank. This one doesn’t care about duration, I don’t think it needs to. If you want to be consistent you can add it.

Then, create this snippet, named as mentioned:

{% assign vimeo_prepend = "https://player.vimeo.com/video/" %}
{% assign vimeo_url = article.metafields.video.vimeo-id | prepend: vimeo_prepend %}
{% assign iframe_title = article.title | prepend: "Video: " %}
<iframe title="{{ iframe_title | escape }}" src="{{ vimeo_url | escape }}" width="640" height="360" frameborder="0" allow="autoplay; fullscreen" allowfullscreen></iframe>

That was our default embed code, modified with the liquid placeholders. If you have a different default embed code, start with that and add in the placeholders as you see above.

4. Bulk remove embed codes from the article body

NOTE: If you apply the above step (#3) to your current live template, you will now have double videos on all your page.

You need to remove all the embed codes that you put in the article body because you don’t need those anymore.

You can do steps 3 and 4 in two different ways:

  • Make a new template, and then edit your blog articles in bulk to (1) Switch articles to the new template and (2)Remove body embed codes
  • Make a test template, then edit your blog articles in bulk to (1) Remove body embed codes. At the same time, copy the changes from your test template to the regular template

I thought about it and chose the second method for 2 reasons:

  • I err on the side of avoiding template proliferation
  • The include statement is wrapped in a conditional that checks for a video first, so you won’t get anything weird happening on blog articles with no videos.

Hope this is helpful! Modify to suit your needs.