Videos make your content vibrant, easier to consume, and more engaging. In this article, we share how you can 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.
In this article
How to add a video to your page
Videos are a great way to make your content stand out. With the video element, you can add videos to a column.
In the elements tab on the left-hand side of the editor, you can 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 have the option to 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 don't support YouTube shorts at the moment.
💡 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 not show a grey box.
If you want to change the preselected image, you can hover over the thumbnail and click replace image. Clicking here will direct you to the media library, where you can select or upload the correct 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 on your pages in a video element.
You can not 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 menu on the left and then click on the new video icon in 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 - Give your video a name and link to the YouTube video directly. We don't support YouTube shorts at the moment.
Vimeo - Give your video a name and link to the Vimeo video directly.
Self-hosted video - These are videos that you host on your own server. These videos should always be in an MP4 format and should be entered as a URL. This means that the URL should always end on ".mp4".
💡 Using self-hosted videos is not available for all licenses. If you're interested in this functionality, contact our Customer Success Management team.
Adding a fallback image is mandatory. If you didn't add a fallback image, there would be a grey box visible that might confuse your audience.
How to replace a video
You can replace a video or image via the replace icon in the blue element bar. This will open up the media library, where you can select and choose a new video.
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.
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 at the border color picker.
You can add a shadow to most of the elements. Choose the shadow color with the color picker. After selecting the color you can choose the horizontal position and vertical position. The blur radius can be used to make the shadow less harsh and a bit more faded.
Spacing can be increased to create more space between the border of the element and the content within the element.
With this option, you can change the alignment of the content within the element itself. The content can be aligned left, center, or right.
With this option, it is possible to choose in which view modes the video is visible. This allows you to show certain elements on desktop but hide them on mobile, or the other way around.
The entrance animation of the element can be selected in the drop-down menu. This animation will show once when the page is opened.