Insert a video on a page

You want to add a video on a page of your platform.

There are three steps to inserting video on a page.

Retrieving the URL of the video

For information, you can host the video in your document management space in the administrator area and get a URL of the file.

Editing page content

edit the page where you want to add the video in HTML mode by adding HTML content containing the video.

Add CSS lines for content formatting in your platform's CSS editor.

Then preview the result of the page

Examples of content

HTML content containing the video

<div><strong><video loop muted autoplay poster="img/videoframe.jpg"> <source src="https://test-api.particeep.com/document/94220b36-ed00-4a08-b03c-2dbf870f24e9" type="video/mp4"></video>  </strong></div>  <div><div><div><div><div><h1>Send your innovation !</h1><a href="/start-project" rel="nofollow">Submit now</a></div></div></div></div></div> 

CSS content for formatting.

.fullscreen-bg { position: absolute; top: 0; right: 0; bottom: 0; left: 0; overflow: hidden; z-index: -1; }<br>.fullscreen-bg__video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }<br>@media (min-aspect-ratio: 16/9) { .fullscreen-bg__video { height: 300%; top: -100%; } }<br>@media (max-aspect-ratio: 16/9) { .fullscreen-bg__video { width: 300%; left: -100%; } }<br>@media (max-width: 767px) { .fullscreen-bg { <br>background: url('https://d2v9y0dukr6mq2.cloudfront.net/video/thumbnail/NGTYhyRhgilq4uu1a/seamless-animation-of-deep-blue-ocean-with-shipwreck-background-ship-sunk-in-undersea-water-as-a-silhouette-background-with-bubbles-and-light-shinning-through-the-sea-water-surface-in-4k-hd-loop_h6geyqr8we_thumbnail-small01.jpg') center center / cover no-repeat; }<br>.fullscreen-bg__video { display: none; } } 

For more information on adding video in HTML content, please read this full article on the subject.