Working with the video element

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.

Screenshot 2023-05-08 at 11.15.12

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.

Select existing video

💡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.

Add new video

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 

Create new video

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 fallback image
Once ready, click Create to save your video. You can now select this video from the media library and add it to your page!
Select new video
Some stock video websites, such as Pexels, allow you to copy-paste an .mp4 video URL into the self-hosted video field.
To do so, right-click the video preview and click copy video address. You'll then copy a URL (e.g., https://videos.pexels.com/video-files/3326847/3326847-hd_1280_720_24fps.mp4) to paste into the self-hosted video field.
Screenshot 2024-06-03 at 13.01.19

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.

Screenshot 2023-05-08 at 11.16.08

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.

To enable the accessible (& unbranded) video player, open your Doc in the editor and go to the Doc settings in the Menu.
Doc Settings - Accessible video player
Navigate to the Accessibility section and toggle on the Accessible video player optionClick Save.
Accessibility Settings_video player
Once enabled, all video elements in your Doc will automatically switch to the accessible player. The result? A sleeker, more inclusive video experience for every viewer!
Accessible Video Player

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.

Video 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.

Screenshot 2023-05-08 at 11.16.37

Shadow

Add shadows to your video element and adjust the color, position, and blur radius.

Screenshot 2023-05-08 at 11.16.44

Spacing

Add extra space below the video to create distance from the next element..

Screenshot 2023-05-08 at 11.16.55

Alignment

Set the alignment to either left, center, or right.

Screenshot 2023-05-08 at 11.17.08

Visibility

Show or hide the video in desktop, tablet, or mobile view modes.

Screenshot 2023-05-08 at 11.17.16

Animation

Select an entrance animation that will play when the page is opened.

Screenshot 2023-05-08 at 11.17.25