Messages recommandés

pwepwe973    6

Bonjours
voici une petite méthode que j'ai utilisé pour avoir un fond d’écrans vidéos sur zwii.

 

 

5bf74734cefd0_Capturedcran_2018-11-23_01-12-11.thumb.png.22c017a7235e3cd44150d12d03e83c94.png

 


1. Cliquer sur personnaliser le thème en haut a droite lorsque vous êtes connecté, vous cliquez ensuite sur mode avancé en bas de la page.
Puis dans le code css qui s'affiche, vous ajouté le code suivant.

 


* { box-sizing: border-box; }
.video-background {
  background: #000;
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: -99;
}
.video-foreground,
.video-background iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
#vidtop-content {
	top: 0;
	color: #fff;
}
.vid-info { position: absolute; top: 0; right: 0; width: 33%; background: rgba(0,0,0,0.3); color: #fff; padding: 1rem; font-family: Avenir, Helvetica, sans-serif; }
.vid-info h1 { font-size: 2rem; font-weight: 700; margin-top: 0; line-height: 1.2; }
.vid-info a { display: block; color: #fff; text-decoration: none; background: rgba(0,0,0,0.5); transition: .6s background; border-bottom: none; margin: 1rem auto; text-align: center; }
@media (min-aspect-ratio: 16/9) {
  .video-foreground { height: 300%; top: -100%; }
}
@media (max-aspect-ratio: 16/9) {
  .video-foreground { width: 300%; left: -100%; }
}
@media all and (max-width: 600px) {
.vid-info { width: 50%; padding: .5rem; }
.vid-info h1 { margin-bottom: .2rem; }
}
@media all and (max-width: 500px) {
.vid-info .acronym { display: none; }
}

 


2. Et dans la page ou vous voulez ajouter le fond d’écrans vidéo,
vous mettez ce code html avec votre playlists YouTube

<div class="video-background">
<div class="video-foreground"><iframe src="https://www.youtube.com/embed/W0LHTWG-UmQ?controls=0&showinfo=0&rel=0&autoplay=1&loop=1&list=PLgIerhn1S8dOr8u2R6hfqri6xWd0Yw6SH&mute=1" frameborder="0" allowfullscreen="allowfullscreen"></iframe></div>
</div>

 


https://www.youtube.com/embed/W0LHTWG-UmQ?controls=0&showinfo=0&rel=0&autoplay=1&loop=1&list=PLgIerhn1S8dOr8u2R6hfqri6xWd0Yw6SH&mute=1

 

Voici les caractéristiques des paramètres en gras de l'url YouTube ci dessus :  

 

https://www.youtube.com/embed/W0LHTWG-UmQ :             ID de ma vidéo

?controls=0  :           Masquer les bouton

&showinfo=0 :          Pour masquer les information de la vidéos comme le titre etc...

&rel=0 :                    Pour empêcher au lecteur d'afficher d'autre vidéos similaire

&autoplay=1 :           Lecture automatique

&loop=1 :                  Lecture en boucle

&list= PLgIerhn1S8dOr8u2R6hfqri6xWd0Yw6SH :               ID de votre playlists

&mute=1 :                Met le son en muet

 

 


Voila comment ajouter un fond vidéo.

 

 

Capture d’écran_2018-11-23_01-18-38.png

Capture d’écran_2018-11-23_01-07-36.png

Modifié par pwepwe973
  • Thanks 2

Partager ce message


Lien à poster
Partager sur d’autres sites
PeterRabbit    371

Merci d'avoir posté le tuto que je t'avais demandé, @pwepwe973 ! Combien ont promis, qui ne l'ont pas fait !

En échange tu auras un petit cadeau à ton réveil, avec le décalage horaire. :)

On devrait d'ailleurs faire une équipe sur plusieurs continents : elle travaillerait non stop ! :mrgreen:

Modifié par PeterRabbit

Partager ce message


Lien à poster
Partager sur d’autres sites

Créer un compte ou se connecter pour commenter

Vous devez être membre afin de pouvoir déposer un commentaire

Créer un compte

Créez un compte sur notre communauté. C’est facile !

Créer un nouveau compte

Se connecter

Vous avez déjà un compte ? Connectez-vous ici.

Connectez-vous maintenant

  • Contenu similaire

    • Par pwepwe973
      Bonjours,
      j'ai cherché et j'ai pas vu d'option pour permettre de modifier le code de l’entête et mettre autre chose que des images j'aimerais mettre une vidéos en fond.

        j'ai mis la vidéo en background du site lui même mais cela me conviens pas j'aimerais plutôt le voir en entête
       
      si cette option n'existe pas j'aimerais bien vous la suggérer et encore bravo pour ce beau projet j'aime beaucoup
       
      cordialement SYLVAIN