Skip to main content

How to add videos to your landing page

In this article you’ll learn how to include videos in Onepage.

Jacob avatar
Written by Jacob
Updated this week

Videos can be a strong visual element on your landing page. You can add videos in Onepage with just a few clicks.

⚠️ Important: It is not possible to upload videos from your local storage directly into Onepage.

Instead, the video must be hosted on a video sharing platform. Currently, we support these platforms:

  • YouTube

  • Vimeo

  • Wistia

  • Facebook

  • YouTube Shorts

  • Twitch

  • Loom

  • TikTok

In case, you wish to use a different platform, there is always the option to integrate video via custom code.

Add Video as an element

Most sections in Onepage allow you to add media, including videos.

You can add a video to almost any part of your website by editing the sections.

Step 1: find and add the video element.

Open the editing menu. In this list, you’ll find a variety of elements.

Go to “+Add element” and find the "Video" Element.

Step 2: Add the URL

Please copy the URL of your video and paste it here:

Step 3: Customize the video

Underneath the link you will find various means of displaying options.

Here are the most used features.

*Click on the needed feature, and a short explanation will be displayed.

Autoplay

Please note, if you activate autoplay, the video will be muted and looped automatically.

Show/Hide controls

The controls are enabled in the "Button" and "Cover-image" type by default, but not in the "Embedded" type. In this case, you must activate the option manually.

Loop/Mute

By default, the video is not looped or muted, but you can change this if needed. Besides, the video is looped and muted automatically, if you set it to autoplay.

Open in modal

If you enable this option, the video will not play directly on the page but will open in a pop-up window as soon as the user clicks on the video or the play button.

Image preview

With this setting, you can upload a custom preview image for your video. This image is displayed before the video plays.

Video Aspect Ratio

Here you define the aspect ratio of the video, for example 16:9 or 1:1. This helps you fit the video perfectly into your page layout.

Play-Button Style

This option allows you to customize the appearance of the play button.

This section offer various design options for the play button.

The most important of them are:

  1. Play-Button with text:

  2. Play-Button animation:

Video as a background for a section

You have also the option to put your video as a background of a section.

Step 1: Open the background settings of your section

Step 2: Add video URL

Step 3: Customize the video

Here are some options, which you can use:

*Click on the needed feature, and a short explanation will be displayed.

Parallax

This feature allows you to magnify the video. It can be helpful in correcting black lines that appear when the video is not in the correct aspect ratio.

Fallback image

This feature adds a picture, which is shortly displayed before the video is played. It is sometimes used to compensate for possible slow internet connections of end users, which may result in longer video loading times.

Overlay

This is mostly used for design purposes. This feature adds either a solid or gradient colour overlay to your video. The colours are defined by your project settings and if you wish to have a different colour, please change it in the "design" section.

You will find more information in this article.

Video integration using custom code

If you are using a platform with which we do not have a direct integration at the moment, there is always the option of integrating a video via custom code.
​

In this case, please read the following article;

How to integrate custom code into a section

💡Do you have any feedback concerning this article? Please let us know through our live chat so we may keep it up to date. Thank you! 🙂

Did this answer your question?