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.
In this article
Add a video to your page
You can add a video to your page using 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 media library will open. You can select an existing video or add a new one to the media library.
To add an existing video, click on the check mark on the video and then click the Select media button to add it to your page.
💡Your audience can decline targeting cookies. In doing so, they also decline cookies from video platforms such as YouTube, Vimeo or Wistia — which results in videos being blocked. Learn more about What happens when a visitor declines cookies.
Add a new video to the media library
You can add videos to the media library at any time.
💡 Videos must be linked via a URL. Direct uploads from your computer are not supported — this helps keep your Foleon Doc loading quickly.
In the media library, click on the new video icon in the top right corner of the screen.
A New video pop-up will appear. Select your video type and complete the following:
-
YouTube - Name your video and paste the URL or video ID from YouTube
-
Vimeo - Name your video and paste the URL or video ID from Vimeo
- Wistia - Name your video and paste the URL or video ID from Wistia
-
Self-hosted video - These are videos you host on your own server. They should always be in MP4 format and entered as a URL, meaning the URL should always end in ".mp4." It can't be an embed code or a regular ".com" link. Name your video and paste the URL.
⚠️ Using self-hosted videos is not available for all plans. If you're interested in this functionality, contact us here.
💡 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
The fallback image is mandatory. If the video doesn't play, the page will show the fallback image.
If you want to change the preselected image, hover over the thumbnail and click replace image. This will take you to the media library, where you can select or upload another image.
Replace a video
You can replace a video by clicking the replace icon in the blue element bar. This opens the media library, where you can select a new video.
Accessible (& unbranded) video player
With our accessible video player, you can make all the video elements in your Doc more inclusive and unbranded. This option improves keyboard navigation and screen reader compatibility. As a bonus, it also removes platform branding from YouTube, Vimeo, Wistia, and self-hosted videos!
💡 This setting applies only to video elements. Background videos remain unchanged.
Element settings
You can style your video element to fit your design.
Hover over the video and click the cogwheel icon to open the element settings.
💡When working with the Content Builder, you'll have limited element settings. You can only replace videos in block templates.
Border
Add a border around your video. You can apply the same border weight on all sides or adjust each side individually. All borders will use the same selected color.
Shadow
Add shadows to your video element and adjust the color, position, and blur radius.
Spacing
Add extra space below the video to create distance from the next element..
Alignment
Set the alignment to either left, center, or right.
Visibility
Show or hide the video in desktop, tablet, or mobile view modes.
Animation
Select an entrance animation that will play when the page is opened.
Related articles