How to embed a custom video on your page

 

Aside from embedding Youtube and Vimeo videos, you can also use custom code to embed a video hosted on another source onto your page in GemPages.

 

Upload your video to a hosting server


Prepare your video and upload it to your hosting server. In this case, we’ll use Shopify CDN (Content Delivery Network) as the host.

 

Step 1: Go to Shopify Admin > Settings > 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 video to upload from your device.

 

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


 

Embed the video on your page


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


Autoplay without navigation controls:

 

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


No autoplay, no loop and with navigation controls:

 

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


Replace XXXXX with the URL of your video copied from the hosting server.


For the third option, since the video 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” to bring the video to your front page.


 

Make your video responsive on all devices


To make your video responsive and look properly on all screen sizes, a few more steps are needed in the Liquid element:


Step 1: Right-click on the Liquid element > Edit Code > Template tab


Step 2: Copy and paste this code at the start of the code line you pasted in Step 4 in the section 

Embed the video on your page above. This is called an opening tag with the class value: “gem-custom-video

 

<div class=”gem-custom-video”>



Step 3: Copy and paste this code at the end of the code line. This is the closing tag:

 

</div>



Step 4: Switch to the CCS tab in the Code editor. Copy and paste this code to the CSS tab:

.gem-custom-video{ 

overflow: hidden; 

padding-top: 56.25%; /* 16:9 */ 

position: relative;

 } 

.gem-custom-video  video { 

position: absolute; 

top: 0;

left: 0;

 border: 0; 

width: 100%;

 height: 100%;

object-fit:cover; 

}

 

 

Here, the padding-top: 56.25%; /* 16:9 */ attribute makes the video fit for the common 16:9 ratio. You can adjust this attribute to suit your needs.

For example:

padding-top: 120%; /* 5:6 */ for video shot in the 5:6 ratio

padding-top: 75%; /* 4:3 */ for video shot in the 4:3 ratio.

 

The class value “gem-custom-video” can be changed to whichever name you prefer. However, make sure you change the value for the second code in the CSS tab as well.

 

Step 5: Hit “Save” and exit the Code editor. Save and Publish the page to bring your video to the front store.

 

For more guidance and tutorials, feel free to explore our Help Center.

If you need any further assistance, our GemPages Support Team can be reached anytime via email or live chat.

 


Was this helpful?