How to embed a custom video link

Using iframe codes is an alternative way to upload a video to your page instead of embedding Youtube or Vimeo links.

Step 1: Upload your video from the Files page in Shopify and Copy the video URL. 

You can host your video on other sources at this step.

 

Step 2:  Copy the video URL from Step 1, it will look like the screenshot below:

 

 

Step 3: Please choose one of these codes below with the function you desire:

 

- Video autoplay with no-control: 

<video poster="" loop="" muted="" playsinline="" autoplay="" src="https://cdn.shopify.com/s/files/1/0326/4269/5299/files/Screen_Recording_2020-04-20_at_16.18.11.mov?v=1587631498" width="100%"></video>

 

- Video autoplay with control:

<video poster="" loop="" muted="" playsinline="" controls="" autoplay="" src="https://cdn.shopify.com/s/files/1/0326/4269/5299/files/Screen_Recording_2020-04-20_at_16.18.11.mov?v=1587631498" width="100%"></video>

 

- Video with control, no-autoplay, no-loop:

<video poster="" controls="" playsinline="" src="https://cdn.shopify.com/s/files/1/0326/4269/5299/files/Screen_Recording_2020-04-20_at_16.18.11.mov?v=1587631498" width="100%"></video>
In this case, if you want to add a thumbnail into your video, you could add the "poster" properties in the code like this:
<video poster="{your-image-url}" loop="" muted="" playsinline="" autoplay="" src="https://cdn.shopify.com/s/files/1/0326/4269/5299/files/Screen_Recording_2020-04-20_at_16.18.11.mov?v=1587631498" width="100%"></video>

Please replace "{your-image-url}" with the URL of your image.

 

Step 4: Inside the GemPages editor, drag and drop a Liquid module to your page.

 

 

Step 5: Right-click on the Liquid module and select Edit code

 

 

Step 6: Copy the codes on Step 2 and paste it into the field.

 

At this step, you could adjust the size of your video by changing the number at width properties.

Step 7: Hit Save on the panel then Save. Preview the editor and check if the result satisfies you on the Preview mode.

 

These are all the steps to embed a video from other sources than Youtube or Vimeo on your page. Feel free to contact our support if you need further assistance. We're always happy to help! 


Was this helpful?