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.
Background video vs. the video element
Background videos are a great way to make your content more dynamic.
Keep in mind that there are two ways to add videos to your Foleon Docs: as a background video or as a video element.
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.
- Desktop: 1920x1080 px
- Tablet: 768x1024 px
- Mobile: 525x934 px
These dimensions will ensure that your video is as responsive as possible across all screen sizes.
💡 YouTube Shorts are not currently supported. As a workaround, replace "shorts" with "embed" in the video's URL.
For example, if the original URL is:
🔗 https://www.youtube.com/shorts/j8kenbdjs
Change it to:
✅ https://www.youtube.com/embed/j8kenbdjs
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, there are a few block settings you can adjust:
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, the fallback image will display after your video is done playing.
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
You can enable autoplay for mobile and tablet users to ensure your design remains visually engaging on every screen size.
Go to the block that contains the background video. Open the block settings > background. Turn on the toggle Autoplay on mobile. The video will now play on all view modes, including mobile and tablet.
You can also adjust the background focus to control how the video is positioned on smaller screens. Choose from left, center (default), or right.
⚠️ Video quality on mobile may vary depending on the device's network speed.
Background videos and sound
Your background videos may include sound, but auto playing sound is not supported. This is because many website visitors find unexpected audio 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.
Limitations
In the Editor, videos are fixed in size or constrained by aspect ratio to fit within the frame. In Viewer modes (Preview and Live), videos adapt to screen size based on responsive design. Background videos set to "full" will adjust to fit the width or height of the block, which may cause parts of the video to be cropped. We recommend avoiding important text or content near the edges of background videos to prevent cropping.
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 the below example, you can see 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
