Bonsoir,
Lauyan vous à parlé d'une vidéo en fond d'écran pour Pages XL, on va faire pareil pour TOWeb.
Vous devez d'abord créer la vidéo sous deux formats, " .mp4 " et " .webm ", puis une image représentant la couverture de votre vidéo " .jpg " ou " .png " . Ce sont les mêmes formats que pour une vidéo html5, vous pouvez convertir avec Miro Video Converter.
Attention, votre vidéo ne doit pas être trop importante, entre 10 et 30 secondes pour un poids ne dépassant pas le Mo pour ne pas pénaliser l'ouverture de votre page.
Dans ce qui suit,
remplacez ' video1 ' par le nom de votre vidéoDans un
champ HTML vous écrivez ,
<video poster="_fields/video1.png" id="bgvid" playsinline autoplay muted loop>
<source src="_fields/video1.webm" type="video/webm">
<source src="_fields/video1.mp4" type="video/mp4">
</video>
Et dans les
Fichiers additionnels vous copiez vos trois fichiers
Vous copiez ensuite le %_____% dans un paragraphe de votre rubrique.
Dans le
<head> de la rubrique recevant la vidéo écrivez
<style>
html, body, #site, #page, #content {
background: none;
background-color: none;
border: none;
}
video { display: block; }
video#bgvid {
opacity: 0.8;
position: fixed; right: 0; bottom: 0;
min-width: 100%; min-height: 100%;
width: auto; height: auto; z-index: -100;
background: url(_fields/video1.png) no-repeat;
background-size: cover;
}
@media screen and (max-device-width: 800px) {
html { background: url(_fields/video1.png) #000 no-repeat center center fixed; }
#bgvid { display: none; }
}
</style>
Voilà, si je n'ai rien oublié, ça doit fonctionner
comme ici
http://testtoweb.free.fr/testvideo/a-propos-de-nous.htmlAu fait, vous devez créer autant de scripts que de vidéos que vous voulez placer.
Cdlt
frangin62
Merci à Jacmgt pour le lien qu'il a fourni dans un précédent post
Edit j'ai ajouté ' opacity: 0.8; ' qui permet d'atténuer la visibilité de la vidéo : 1 est le max 0.1 est le mini
TOWeb
Tutoriaux pour les utilisateurs
Auteur
