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="" width="100%"></video>


- Video autoplay with control:

<video poster="" loop="" muted="" playsinline="" controls="" autoplay="" src="" width="100%"></video>


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

<video poster="" controls="" playsinline="" src="" 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="" 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?