Insérer une vidéo sur une page
Vous souhaitez ajouter une vidéo sur une page de votre plateforme.
L’insertion de vidéo sur une page se fait en trois étapes.
Récupération du lien url de la vidéo
Pour information, vous pouvez héberger la vidéo dans votre espace de gestion des documents dans l'espace administrateur et obtenir une URL du fichier.
Modification du contenu de la page
modifier la page sur laquelle vous souhaitez ajouter la vidéo en mode HTML en ajoutant du contenu HTML contenant la vidéo.
Ajouter des lignes de CSS pour la mise en forme du contenu dans l'éditeur CSS de votre plateforme.
Prévisualisez ensuite la résultat de la page
Exemples de contenus
Contenu HTML contenant la vidéo
<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>
Contenu CSS pour la mise en forme.
.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; } }
Pour plus d'information sur l'ajout de vidéo dans du contenu HTML, n'hésitez pas à lire cet article complet sur le sujet.