Embed a Custom Video on your Page

Upload your video to a hosting server

In this case, we’ll use Shopify CDN (Content Delivery Network) as the host.

Step 1: Go to Shopify Admin > Content > Files.

Step 2: Click on the “Upload files” button at the top right corner. If you have no uploaded files here, the button will also appear in the middle of the screen.

Step 3: Select the file to upload from your device.

Step 4: After the upload has finished, copy the URL by clicking on the chain icon.

Embed the video on your page

Starting from this point, the steps may differ based on the specific version of the GemPages Editor you are using. Please locate the instructions that correspond to your Version and proceed with the following steps accordingly.

Version 6

Step 1: In the GemPages Dashboard, click on your chosen page and enter the Editor.

Step 2: Search for the Liquid element to drag & drop it onto your page.

Step 3: Right-click on the Liquid element and select “Edit Code“.

Step 4: Select an option to copy and paste the code into the Code Editor window.

Autoplay with navigation controls:

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

Autoplay without navigation controls:

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

No autoplay, no loop and with navigation controls:

<video poster="YYYYY" controls="" playsinline="" src="ABCDEF" width="100%"></video>

Replace ABCDEF with the URL you copied from the hosting server.

For the third option, since the file will not autoplay, you can set up a thumbnail image for it. To do that, replace YYYYY with the URL of your image.

Step 5: Hit “Save” and exit out of the code editor.

Step 6: Hit “Save” and “Publish”

You also can check out this article on how to add a video to your page with GemPages:

Version 7

Step 1: From the GemPages’ Dashboard, select the preferred template to enter the Editor.

Step 2: Locate the Custom Code element on the left sidebar, under the Advanced section. Drag and drop it to your preferred location.

Step 3: Click on the element to reveal the code panel on the left sidebar. Select an option to copy and paste the code into the HTML tab.

Autoplay with navigation controls:

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

Autoplay without navigation controls:

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

No autoplay, no loop and with navigation controls:

<video poster="YYYYY" controls="" playsinline="" src="ABCDEF" width="100%"></video>

Replace ABCDEF with the URL you copied from the hosting server.

For the third option, since the file will not autoplay, you can set up a thumbnail image for it. To do that, replace YYYYY with the URL of your image.

Step 5: Hit the “Save” and “Preview” button to see the live page

More guides to help you master GemPages can be found here.