How to add videos

In this article, you will learn all possible ways to include videos on your website.

How to embed a YouTube or Vimeo video

We recommend that you embed videos via platforms such as YouTube and Vimeo because they are configured for this and optimize videos accordingly - and your website visitors will benefit from faster loading times. 

Adding a YouTube or Vimeo video is super easy in the Editor. Since both are integrated in the same way we will demonstrate it with a YouTube video. The easiest way to embed a YouTube video is by copying the URL of the video and pasting it into our YouTube element (for a Vimeo video use the Vimeo element). 

We highly recommend adding a Container element first which allows you to make adjustments to e.g. the width and height of the container (and thus the video). 

To add a container click on the Elements category in the left sidebar and drag and drop the Container element into the website. 

Now, go back to the Elements category in the left sidebar and drag and drop the YouTube element into the Container element.

Once you have added the YouTube element you will see a dummy video on the website. To show your video here replace the link in the YouTube URL field in the left settings panel.

In the settings panel you will also find other options for this element: 

• Aspect ratio: Adjust the Aspect Ratio of your video.
• Lazyload: This setting determines whether the video shall be loaded in advance or only after hitting the play button.
• Show controls: This will enable or disable the play button, volume control, etc.
• Show related videos: After the video has ended, there will be a list of suggested videos from YouTube, when this is enabled.

Embedding video files directly

It is also possible to upload your own videos directly or choose a stock video from the Pexels integration and display them on your website. 

To do so, click on the Elements category in the left sidebar and drag and drop the Container element into the website. 

Now, go back to the Elements category in the left sidebar and drag and drop the Video element into the Container element.

Now that you have added a Video element you can either upload your own video or select a video from the stock videos by clicking on select files from Files or our free stock photos & videos in the upload field in the left settings panel. 

If you like you can also upload a preview image that will be shown before the video is played. 

Under Behavior, you will also find different settings that you can adjust: 

• Autoplay: This will make sure that the video will automatically start
• Mute video: This will mute the sound of the video
• Loop video: This will replay the video over and over again
• Show controls: This will enable or disable the play button, volume control, etc.

Videos in the background

You don't want to use videos front and center, but rather add them as a background? No problem! 

For Container elements, you will find the option Background. There you can decide if you want:

• None: No background
• Color/Gradient: Here you can either set up a specific color or a gradient.
• Element: Here you can select between different elements that can be used as backgrounds, e.g. image, map, video, or HTML. 

With a click on Element > Video (or YouTube or Vimeo if you want to link a video), you will find the video settings in the left panel. Simply upload your own video or select one from the stock video library under Files, add a preview image, and manage the other video settings. 

You can also add a color overlay e.g. if you choose a dark overlay it might be easier to read the text that is shown on top of the video.

You can also add shape dividers on top of the video. Go to the Container tab and scroll down to the Shape Divider section to select your preferred design. You can customize it by changing the color, width, height, etc.