HTML video
About HTML Video Element
Summary: The HTML Video Element is designed to make your page more attractive in order to increase the conversion rate. You can use this element to share a video on your website or blog.
Before jumping to the detailed steps, you can watch this video below:
How To Access HTML Video Element
The HTML video element can be found by clicking in the Elements icon on the left toolbar.
Step 1: Click on the Elements icon which will open the list of elements
Step 2: In the PageFly’s element tab, click on the “HTML video”
Step 3: Drag and drop the element into the page editor
How To Configure For HTML Video Element
This element comes with plenty of different parameters allowing you to fine-tune content appearance reaching the best possible conversion rate.
Select the HTML Video element you’ve added to your page and navigate to the General and Styling tabs to access its configurations.
Important note:
The file size must be less than 10MB.
Supported video formats include MP4, WebM, and Ogg.
General Configurations
Navigate to the General tab for overall settings. Review the main settings for HTML video elements below. For details on Visibility, Attributes, and Animation settings, refer to this guide.
HTML Video Source
You can upload a video or embed a URL by clicking in the Reselect button.
Add videos from your computer
Click on the “Select video” button, and then click on the “Add videos” button or you can drag and drop the video into the dotted-line area.
Add video from URL
To add video from a URL, in the Shopify left navigation, head over to Content > Files, and click on the link button to copy the link.
Then, in the PageFly editor, click Select video > Add from URL and paste the URL to the Video URL to add video.
Add video from Media files
Next to the URL icon, you can click on the "Media files" option, which will take you to a list of available videos.
If you want to remove the video file or URL from the element, just need to click on the “Clear” button here and you can select another video for this element.
Show Controls
You can choose to show the video player control or hide it by selecting or deselecting this option.
Enable Loop
When this parameter has been turned on, the video will play constantly non-stop in a loop. You can check this function on Liveview.
Enable Autoplay
You can turn on/off the autoplay feature by selecting or deselecting this parameter.
Please keep in mind that the autoplay function might not work in the following cases:
The user configured his browser to prevent that action or parameter “Mute Video” from being turned off.
Users use the iPhone with Low Power Mode and access your website by Safari browser, the Enable Autoplay feature will not be activated.
Mute Video
Switch between Yes or No to turn off the video’s sound.
Content Loading
You can customize how the video will load with these two options:
Lazy loading: Videos will load only when they appear on the user’s screen, saving bandwidth and speeding up the initial page load.
Standard: All videos load immediately when the page opens, ensuring everything is ready right away. This setting will improve the user experience.
Cover Image Source
Set an image as the video thumbnail cover by hitting “Select image”, choose the image you want and click “Done”.
Image Quality
This provides you with different values that help you customize image quality and optimize performance across all devices. Each value adjusts the image dimensions based on predefined min-width and max-width values :
Auto (375px - 2048px)
Original (original size): Leave the original quality
Thumbnail: 375px
Low (375px - 550px)
Medium (375px-1280px)
High (375px-1920px)
Very high (375px-2560px)
Ultra (375px-3840px)
Cover Image Loading
To improve your store’s loading speed, select one of the following Cover Image Loading options:
Lazy Load: Loads the image only when it comes into view, improving initial load times.
Preload: Loads the image early to make it available faster.
Standard: Loads the image normally, along with the rest of the content.
Styling Configurations
Navigate to the Styling tab to customize how the HTML Video element looks. You can check more information about settings in this tab using this Element Style Settings guide.
Use Cases
Align The HTML Video In The Middle Of Its Container
If you want to place the HTML in the middle of its container, go to Styling > Spacing > Padding and enter a number in the center margin. The larger the number, the bigger the space around the video would be.
Add Border To HTML Video
In order to make your HTML stand out from other elements, give it more noticeable edges by adding borders. There are three default border styles:
Solid
Dotted
Dash
Frequently Asked Questions
1. What is the maximum file size for HTML Video?
The maximum file size for HTML video is 10 MB.
2. What are the supported formats for HTML Video?
Supported video formats include MP4, WebM, and Ogg.
3. What is HTML Video?
The HTML Video Element is designed to make your page more attractive, to increase the conversion rate. You can use this element to share a video on your website or blog.
4. What is the difference between HTML Video element and Youtube element?
You can use this Video Element to upload and use videos on your website without a YouTube account. However, there are file size restrictions to ensure that the videos play smoothly and that your website loads quickly.
5. What are best practices for using HTML Video?
Use high-quality videos that are relevant to your products or brand.
Consider offering your videos in multiple formats (e.g., MP4, WebM) to ensure wider browser compatibility and playback success.
Optimize your video files for faster loading times. Large video files can slow down your website, impacting user experience and SEO.
Additional Resources
Last updated
Was this helpful?