Background video au lieu d'image ?

Marsh Posté le 15-01-2016 à 22:16:10

Hello,

Je monte un "site perso" et je souhaiterai savoir comment mettre une vidéo en background au lieu d'une image.

J'ai des connaissances rudimentaires en HTML mais rien en CSS.
En gros, j'utilise un template qui applique un "filtre" sur le background-image et j'aimerai remplacer cette image par une vidéo HD qui prendrait tout l'écran...

D'avance merci !

Reply

Marsh Posté le 15-01-2016 à 22:16:10

Reply

Marsh Posté le 16-01-2016 à 00:16:37

1er résultat google
https://la-cascade.io/video-en-background/

---------------
We deserve everything that's coming...

Reply

Marsh Posté le 16-01-2016 à 01:20:04

Le problème c'est que je ne sais pas appliquer le "filtre"

Reply

Marsh Posté le 16-01-2016 à 21:25:50

Quel filtre ? Le code pour faire ce que tu veux est dans la page en lien, à toi de prendre la video de ton choix.

---------------
We deserve everything that's coming...

Reply

Marsh Posté le 16-01-2016 à 23:53:00

Code :

body {
height: 100%;
background-color: #ffffff;
background-image: url("images/overlay.png" ), -moz-linear-gradient(60deg, rgba(255, 165, 150, 0.5) 5%, rgba(0, 228, 255, 0.35)), url("../../images/bg.jpg" );
background-image: url("images/overlay.png" ), -webkit-linear-gradient(60deg, rgba(255, 165, 150, 0.5) 5%, rgba(0, 228, 255, 0.35)), url("../../images/bg.jpg" );
background-image: url("images/overlay.png" ), -ms-linear-gradient(60deg, rgba(255, 165, 150, 0.5) 5%, rgba(0, 228, 255, 0.35)), url("../../images/bg.jpg" );
background-image: url("images/overlay.png" ), linear-gradient(60deg, rgba(255, 165, 150, 0.5) 5%, rgba(0, 228, 255, 0.35)), url("../../images/bg.jpg" );
background-repeat: repeat, no-repeat, no-repeat;
background-size: 100px 100px, cover, cover;
background-position: top left, center center, bottom center;
background-attachment: fixed, fixed, fixed;
}

En gros, j'utilise un "overlay" dans le fond et ce que je voudrais, c'est remplacer l'image bg.jpg par la vidéo et donc que cet "overlay" reste applicable.

Message édité par Leskipper le 16-01-2016 à 23:53:32

Reply

Marsh Posté le 17-01-2016 à 00:15:48

Tant pis pour l'overlay mais j'ai un problème pour configurer le full screen du coup.

Code :

<div style="position: fixed; z-index: -99; width: 100%; height: 100%">
<iframe frameborder="0" height="1080" width="1920"
src="https://youtube.com/embed/ID?autoplay=1&controls=0&showinfo=0&autohide=1">
</iframe>
</div>

Soit j'ai ça pour configurer directement sur mon écran en 1920x1080, ce qui défigure la vidéo sur toute autre support à réso plus basse ou alors

Code :

<div style="position: fixed; z-index: -99; width: 100%; height: 100%">
<iframe frameborder="0" height="100%" width="100%"
src="https://youtube.com/embed/ID?autoplay=1&controls=0&showinfo=0&autohide=1">
</iframe>
</div>

qui me laisse des vieilles barres noires moches sur le côté

Reply

Background video au lieu d'image ?

Sujets relatifs:

Leave a Replay