HTML Video

About HTML Video ElementClick to copy

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 ElementClick to copy

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 Access HTML Video Element

How To Configure For HTML Video ElementClick to copy

This element comes with plenty of different parameters allowing you to fine-tune content appearance reaching the best possible conversion rate.

How To Configure For HTML Video Element

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 ConfigurationsClick to copy

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 SourceClick to copy

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 videos from your computer

  • 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.

Add video from URL

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.

Add video from Media files

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 ControlsClick to copy

You can choose to show the video player control or hide it by selecting or deselecting this option.

Enable LoopClick to copy

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 loop

Enable AutoplayClick to copy

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.

Enable Autoplay

Mute VideoClick to copy

Switch between Yes or No to turn off the video’s sound.

Mute Video

Content LoadingClick to copy

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 SourceClick to copy

Set an image as the video thumbnail cover by hitting “Select image”, choose the image you want and click “Done”.

Image QualityClick to copy

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)

html video PageFly

Cover Image LoadingClick to copy

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.

html video PageFly

Styling ConfigurationsClick to copy

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 CasesClick to copy

Align The HTML Video In The Middle Of Its ContainerClick to copy

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.

Align The HTML Video In The Middle Of Its Container

Add Border To HTML VideoClick to copy

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 QuestionsClick to copy

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 ResourcesClick to copy

Thank you for your feedback!

Navigate this category

PreviousPrevious article

Next articlePrevious

Could not find the answer
to your question?

Chat with us