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.
💡 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 currently do not support adding YouTube Shorts to your page. However, you can use this workaround: In the video’s URL, replace "shorts" with "embed".
For example, if the original URL is:
🔗 https://www.youtube.com/shorts/j8kenbdjs
Change it to:
✅ https://www.youtube.com/shorts/j8kenbdjs
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.
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
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 a tablet or mobile, you can 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 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
