Videos make your content vibrant, easier to consume, and more engaging. In this article, we show you how to work with the video element to spruce up your content.
💡 Want to learn more about background videos? Check out our article Working with background videos.
How to add a video to your page
Videos are a great way to make your content stand out. You add videos to your page with the video element.
In the elements tab on the left-hand side of the editor, drag the video element into a column.
💡When you're working with the Content Builder, it's not possible to add a video to your page. They're included in block templates.
The new video pop-up will appear. You can link to a new video or select an existing video in the media library.
If you add a new video, the video name will show in the media library. The video URL can be either the entire URL or just the video ID. As you can see in the example below, we support links to YouTube and Vimeo
⚠️ 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/embed/j8kenbdjs
💡 Select plans can also upload self-hosted videos, hosted on a URL ending in .mp4. The URL has to end in ".mp4". It can't be an embed code or a regular ".com" link.
The fallback image is mandatory. If, for whatever reason, the video doesn't play, the page will then show the fallback image.
If you want to change the preselected image, hover over the thumbnail and click replace image. Clicking here will direct you to the media library, where you can select or upload another fallback image.
If you're ready to select or upload your video, click create to add it to your page.
You've now added a video to your page!
💡Your audience can decline targeting cookies. In doing so, they also decline cookies from video platforms such as YouTube and Vimeo — which results in videos being blocked. Learn more about What happens when a visitor declines cookies.
How to add a new video to the media library
You can add videos to the media library, which you can later use as a video element on your pages.
You cannot upload videos directly from your computer but link to a video that lives on its own URL. This ensures that the loading time of your Foleon Doc stays fast.
To add a video, navigate to videos in the left menu and click on the new video icon at the top right corner of the screen.
You will then see a pop-up window that offers you different options (depending on your license):
-
YouTube - Name your video and paste the link to the video on YouTube.
-
Vimeo - Click the Vimeo tab, name your video, and paste the link to the video on Vimeo.
-
Self-hosted video - These are videos that you host on your own server. They should always be in MP4 format and entered as a URL, which means that the URL should always end on ".mp4."
⚠️ Using self-hosted videos is not available for all plans. If you're interested in this functionality, contact us here.
Adding a fallback image is mandatory. If you don't add a fallback image, a grey box will appear, which might be confusing to your audience.
If you want to change the preselected image, hover over the thumbnail and click replace image. Clicking here will direct you to the media library, where you can select or upload another fallback image.
How to replace a video
You can replace a video or image by clicking the replace icon in the blue element bar. This will open the media library, where you can select and choose a new video.
Element settings
In the element settings of your video element, you can style your video the way you want to. Hover over the video and click the cogwheel icon. A pop-up with the element settings will appear. We will go over each of the element settings below.
💡When you're working with the Content Builder, you'll have limited element settings. It's only possible to replace the video from a block template.
Border
The border option allows you to create a full border or a border on specific sides of your element. All sides at once is selected by default, which means that when you increase the border weight, the same amount of border will appear on all sides at the same time.
When all sides at once is deselected, the option to increase the amount of the border for each side will appear. It is also possible to add more than one border. Every border will have the same color that is selected on the border color picker.
Shadow
You can add shadows to most of the elements. Use the color picker to choose the shadow color. After selecting the color, you can choose the horizontal and vertical positions. The blur radius can be used to make the shadow less harsh and a bit more faded.
Spacing
Spacing can be increased to create more space between the bottom border of the element and the content within the element.
Alignment
With this option, you can change the alignment of the content within the element itself. The content can be aligned left, center, or right.
Visibility
With this option, you can choose which view modes the video is visible in. This allows you to show certain elements on desktop but hide them on mobile, or the other way around.
Animation
The entrance animation of the element can be selected in the drop-down menu. This animation will show once when the page is opened.
Related articles