Video Element

About the Video element

Unlike version 6, the latest version of the editor combines various video elements, such as YouTube and Vimeo, into a single Video element.

With this updated feature, users can easily showcase videos on various page types and customize them to capture their customers’ attention quickly.

How to Add a Video Element?

Step 1: Open the GemPages Editor and select a page to edit. Find the Video element on the left sidebar under the Media section, or use the search bar for quick access.

Step 2: Drag & drop the element to any position you prefer.

Configure the Settings Tab

Video URL

Video Source: Select a video source from the available options, which include YouTube, Vimeo, and Video hosting video, by using the drop-down menu. Then, enter the corresponding video link into the weblink box.

For the Video hosting option, upload your video to Shopify and paste the video link into the Weblink box. Be sure to preview the result on the live page.

Below is a step-by-step guide for uploading the video to Shopify using 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 haven’t uploaded any files here, the “Upload files” button will appear in the middle of the screen.

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

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

Return to the GemPages Dashboard and paste the copied link into the Weblink box.

Video thumbnail

A video thumbnail is a static image used as a preview for your video. You have three options for uploading your video thumbnail:

• Image uploading: Simply hover over the image and select “Update Image.” This enables you to select an image from your computer and upload it.
• Gallery Browsing: You can choose an image from the gallery, which includes all of your previously uploaded images.
• Link Input: This option allows you to provide the image link directly.

Additionally, select your preferred aspect ratio for the thumbnail from the drop-down menu.

Options

In the options section, you can customize how your video behaves:

• Autoplay: Toggle this switch to enable automatic video playback. Please be aware that certain browsers have implemented restrictions on autoplay. In such cases, your video will return to the thumbnail image, requiring viewers to manually click play to initiate playback. Enabling the sound of your video might also result in autoplay being disabled.
• Enable sound: Switch on to activate the audio of the video. 
• Loop video: The video will play from start to finish and then restart from the beginning.
• Show control bar: Choose whether to display or hide the video control bar on the preview/live pages.

• Lazy load: Turn on/off the video’s Lazy load feature. For more information about this feature, check out this article. Please note that turning on the Lazy Load option may disable the autoplay function.

Starting and ending time

• Start video at: Choose the starting point for your video. 
• End video at: Choose the ending point for your video.

Configure the Advanced Tab

For more advanced customization, please navigate to the Advanced tab and follow the instructions in this article.