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.

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.

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.

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.

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.

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.

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

  

   

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

  

• Spacing

  Spacing can be increased to create more space between the 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, 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.

  

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