Working with the video element

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.

 

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.

Screenshot 2023-05-08 at 11.15.12

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.

 

6396ffb4030e3

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.

6396ffb58e755

If you're ready to select or upload your video, click create to add it to your page.

6396ffb6b50ca

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.

 
Screenshot 2023-05-08 at 11.15.52

 

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.

6396ffb937c81

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.

6396ffba727b7
Some stock video websites, such as Pexels, allow you to copy-paste a .mp4 video URL into the self-hosted video field.
To do so, right-click on a 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
 
Screenshot 2024-06-03 at 13.11.30

 

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.

Screenshot 2023-05-08 at 11.16.08

 

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 at the border color picker.

    Screenshot 2023-05-08 at 11.16.37

     

  • Shadow

    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.

    Screenshot 2023-05-08 at 11.16.44
  • Spacing

    Spacing can be increased to create more space between the border of the element and the content within the element.

    Screenshot 2023-05-08 at 11.16.55
  • Alignment

    With this option, you can change the alignment of the content within the element itself. The content can be aligned leftcenter, or right.

    Screenshot 2023-05-08 at 11.17.08
  • Visibility

    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.

    Screenshot 2023-05-08 at 11.17.16
  • 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.

    Screenshot 2023-05-08 at 11.17.25