Bienvenue, Invité. Veuillez vous connecter ou vous inscrire.
Identifiez-vous Inscrivez-vous Accueil du forum Aide sur le forum
Rester informé des mises à jour et offres TOWeb en souscrivant à la Newsletter TOWeb
pagexl.com pour la création gratuite et facile de sites "one page" (page unique)


IMPORTANT: Avant de poster un message sur le forum n'oubliez pas :
1. d'effectuer une recherche sur le forum ainsi que dans l'aide en ligne TOWeb
2. de consulter les tutoriels vidéo sur YouTube et les dernières informations du blog de TOWeb
3. de consulter les tutoriels de Frangin62
Forum TOWeb|-TOWeb| |-Tutoriaux pour les utilisateurs| | |-Vidéo en fond d'écran pour TW « sujet précédent | | sujet suivant »
Pages: [1] Bas de page Imprimer
Auteur Fil de discussion: Vidéo en fond d'écran pour TW  (Lu 2786 fois)
frangin62
Hero Member
*****

Nombre de "j'aime" : 125
Messages: 2617



WWW
« le: 24 Juillet 2019 à 23h01 »

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éo

Dans un champ HTML vous écrivez ,

Code:
<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

Code:
<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   Clin d'oeil  comme ici
http://testtoweb.free.fr/testvideo/a-propos-de-nous.html

Au 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
« Dernière édition: 29 Juillet 2019 à 07h48 par frangin62 » Journalisée

jacmgt
Hero Member
*****

Nombre de "j'aime" : 60
Messages: 2024



WWW
« Répondre #1 le: 25 Juillet 2019 à 04h41 »

   Et surtout un grand merci à Frangin62 qui n'a peur de rien  Souriant .
Journalisée

frangin62
Hero Member
*****

Nombre de "j'aime" : 125
Messages: 2617



WWW
« Répondre #2 le: 27 Juillet 2019 à 23h43 »

Bonsoir,
Voici la suite du tuto, cette fois on va mettre une vidéo en fond de paragraphe en pleine hauteur
Le premier code est presque le même  (bgvid devient bgvid2) , à copier dans un champ HTML, pensez toujours à changer les  "video1"  par votre video et de placer les fichiers dans les Fichiers additionnels

Code:
<video poster="_fields/video1.png" id="bgvid2" playsinline autoplay muted loop>
<source src="_fields/video1.webm" type="video/webm">
<source src="_fields/video1.mp4" type="video/mp4">
</video>

On place le %____% devant le titre du paragraphe



Le second code est légèrement modifié, on le place toujours dans le head de la rubrique concernée

Code:
<style>
.twpara-row {
  background: none;
  background-color: none;  
  border: none;
  }

video { display: block; }

video#bgvid2 {
  opacity: 0.8;
  position: absolute;
  min-width: 100%; min-height: 110%;
  z-index: -100;
  background: url(_fields/video1.png) no-repeat;
  background-size: cover;  
  background-position: left top;
  margin-top: -35%;  
}
@media screen and (max-device-width: 800px) {
.twpara-row { background: url(_fields/video1.png) #000 no-repeat center center fixed; }
#bgvid2 { display: none; }
}
</style>

Pour ajuster la position de la vidéo il faut modifier les valeurs de ' min-height: ' et de ' margin-top: ' les valeurs actuelles sont pour mon site de test ci-dessous, dans la rubrique  Société , j'y ai mis cette fois une vrai vidéo (pour le premier tuto),
dans la rubrique  Société 2  il y a une image fixe, une image en gif animé, puis la vidéo en question.
Le gif animé est une conversion de la vidéo que j'ai sélectionné comme une image de fond de paragraphe en pleine hauteur. Si vous avez une image de bonne qualité, c'est plus simple et aussi valable.

http://testtoweb.free.fr/testvideo/a-propos-de-nous.html

Cdlt
frangin62

Edit même remarque pour l'opacité que dans le premier post

Si vous voulez mettre plusieurs vidéos dans une même page, vous devez incrémenter   bgvid2  dans les deux scripts
« Dernière édition: 28 Juillet 2019 à 09h14 par frangin62 » Journalisée

frangin62
Hero Member
*****

Nombre de "j'aime" : 125
Messages: 2617



WWW
« Répondre #3 le: 13 Septembre 2019 à 14h07 »

Bonjour,

Les vidéos en fond de paragraphe sont prises en charge dans le logiciel avec la Version 8.
Le script est toujours valable pour les versions antérieures

Cdlt
frangin62
Journalisée

Pages: [1] Haut de page Imprimer 
« sujet précédent | | sujet suivant »
Aller à:  


Cliquez ici pour vous abonner au flux RSS du forum  -  
Powered by SMF 1.1.18 | SMF © 2006-2009, Simple Machines