Background video au lieu d'image ?

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : Background video au lieu d'image ?

Leskipper

MAKE HFR GREAT AGAIN

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 !

Publicité

SICKofitALL

misanthrope

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

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

Leskipper

MAKE HFR GREAT AGAIN

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

SICKofitALL

misanthrope

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...

Leskipper

MAKE HFR GREAT AGAIN

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

Leskipper

MAKE HFR GREAT AGAIN

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é

FORUM HardWare.fr

Programmation

HTML/CSS

Background video au lieu d'image ?

Sujets relatifs
Affichage flux video RTSP Firefox	[CSS] création bandeau avec image.
Insérer une image sur une autre	Idée Programation jeux video TRES COMPLEXE
WPF Affichage dynamique image	Lien sur image au survol ne prend qu'une partie de l'image
copier des cellules excel et les ajouter au corps de mail en image	Lancer une Video en C++
Problème d'image et de lien hypertexte
Plus de sujets relatifs à : Background video au lieu d'image ?

Page générée en 0.070 secondes