Working with background videos

Background videos make your content vibrant, easier to consume, and more engaging. In this article, we share how you can use videos in your Foleon Doc to spruce up your content.

Background video vs. the video element

Background videos are a great way to make your content more dynamic. In this example, you can see how we added a video to a lead generation page.

Keep in mind that there are two ways to implement videos into your Foleon Doc:

• As a background video (this article): to cover the background, as seen in the example above, you can choose to fill it with a background video.

  Go to block settings > background > background type > video > new video or add video from library.

  

If you have control over the dimensions of your video, we recommend the following resolutions for each view mode:

- Desktop: 1920x1080 px
- Tablet: 768x1024 px
- Mobile: 525x934 px

These dimensions will ensure that your video aligns in the best way possible with the responsiveness of the different screen sizes.

• As a video element: in the elements section on the left-hand side of the editor, you are able to implement a video element in a column. Learn more about the video element in our article Working with the video element.
  
  

  

Background video settings

When you have set the background type to video, you have a few settings for the background video in that block.

• Loop background video - By default, background videos will loop, with the loop background video switched on (blue). This means that background videos will start playing again when they have ended.
  
  If you switch off the toggle (making it grey), the fallback image will display after your video is done playing. The fallback image is set by default from the video platform.

• Fallback image - A fallback image is an image that you set to show when a background video is not looping. This means that your background video will end on a static image that you have chosen.

When you set a new video and upload it to the media library, you have the option to control the fallback image with replace image. As you see in the example below, you can click on the image thumbnail of the video to replace the image.

To replace the background video on tablet and mobile, you have the option to upload custom images for those view modes. You can change these images by going to the relevant view mode, and then clicking on replace background image in the block settings.

Background videos on tablet and mobile

Some mobile providers don’t allow autoplay for videos on web pages. For that reason, the fallback image will show by default on tablet and mobile.

If you want your videos to show on mobile, you should create an overlay with the video as an element. Follow these steps to make this work:

1. From elements, place a button into your column

2. Link the button to an existing overlay, or create a new one

3. In the overlay, add a video element to a block and style your overlay

4. Rename the button, for example, to “Watch the video”

5. Hide the button on desktop, by going to button settings > visibility > hide on desktop

Background videos and sound

Your background videos might have sound. However, it's not possible to let the sound for a background video autoplay. This has been decided on since a lot of web page visitors experience automatic sound as being disruptive.

When you have a background video in your Foleon Doc, a speaker icon will appear in the top-right corner of the navigation bar. It's not possible to hide this icon.

Tip: Keep it clean

A “noisy” full-screen background video can be overwhelming for your audience. We recommend using a video that aligns with the rest of your design, or one that uses a plain background for the large part.

In this content hub from Deloitte, they have used a compelling animation as a background video.

Four websites for free stock videos

There are multiple online resources that provide free stock videos. We recommend the following websites:

• Pexels
• Pixabay
• Vimeo
• Allthefreestock

When you have found a video that is suitable for your content, you can follow these next steps to implement it in your Foleon Doc:

1. Download the .mp4 file

2. Upload it to YouTube or Vimeo

3. Add it to your Foleon Doc in the media library