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.
💡 Want to learn more about the video element? Check out our article Working with the video element.
In this article
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.
💡 Only Youtube or Vimeo videos can be uploaded to the media library. Select plans can also upload self-hosted videos hosted on a URL ending in .mp4. We don't support YouTube shorts at the moment.
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.
💡Your audience can decline targeting cookies. In doing so, they also decline cookies from video platforms such as YouTube and Vimeo — which blocks your background video and displays the fallback image. Learn more about What happens when a visitor declines cookies.
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:
From elements, place a button into your column
Link the button to an existing overlay, or create a new one
In the overlay, add a video element to a block and style your overlay
Rename the button, for example, to “Watch the video”
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.
💡 If you want to urge your readers to listen to a video with sound, you can create a Call To Action (CTA) text with a possible .png image of an arrow pointing towards the sound icon in the navigation bar.
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:
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:
Download the .mp4 file
Upload it to YouTube or Vimeo
Add it to your Foleon Doc in the media library