Mettre une video comme BACKGROUND de site web

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : Mettre une video comme BACKGROUND de site web

leserigraphe

Accro au Pomme S

Bonjour,
Pour un client on doit mettre une video en Background d'un site web, comme sur le site de Stromae ( http://www.stromae.org/ ).
Sur le site de Stromae c'est en flash, inconvénient, illisible sur ipad & iphone.

J'ai lu sur le web que le faire en MP4 rendrait la video illsible par certaine personne utilisant 1 ou 2 version antérieur d' Explorer, et un background en .mov risque d'être lourd en plus de ne pas être lisible par certaine version de Firefox.

Ce site ayant pour but de présenter un futur candidait politique, il se doit d'être visible par tous.

Vous savez comment faire? un code à me conseiller ?

voila le code que j'avais vu mais qui ne fonctionne pas à 100% ( comme dit plus haut )
<html>
<head>
<title>TEST</title>
<style>
html body{
width:100%;
height:100%;
}
#fond{
position:absolute;
left:0px;
top:0px;
width:100%;
height:100%;
z-index:-1;
overflow:hidden;
}
#vidfond {
left: 0px;
top: 0px;
margin:0px;
padding:0px;
width:100%;
height:100%;
}
</style>
<script type="text/javascript">
function loopVideo(){
var video=document.getElementById('vidfond');
video.play();
}
</script>
</head>
<body>
<div id="fond">
<video id="vidfond" src="NOM DE LA VIDEO" preload="preload" autoplay="autoplay" loop="loop" onended="loopVideo()"></video>
</div>
<h1>Ceci est du contenu</h1>
<h2>Ceci est du contenu</h2>
<h3>Ceci est du contenu</h3>
<ul>
<li>Element de liste</li>
<li>Element de liste</li>
<li>Element de liste</li>
<li>Element de liste</li>
<li>Element de liste</li>
<li>Element de liste</li>
<li>Element de liste</li>
<li>Element de liste</li>
<li>Element de liste</li>
<li>Element de liste</li>
<li>Element de liste</li>
<li>Element de liste</li>
</ul>
</body>
</html>

Message édité par leserigraphe le 23-12-2011 à 14:10:56

---------------
Papier peint design ///Achat papier peint /// ah mais Illustrator, c'comme un "paint

Publicité

genghis77

-=Illustrator Barbarian=-

Du css inclus dans le html

Cay mal

Pis fuk les imachins ... Zont qu'à supporter le flash

Message cité 1 fois
Message édité par genghis77 le 23-12-2011 à 14:42:27

---------------
Noon3.fr - GrapHFR SpeedLOGO

leserigraphe

Accro au Pomme S

genghis77 a écrit :

Du css inclus dans le html

Cay mal

Pis fuk les imachins ... Zont qu'à supporter le flash

c'est pas trop la question ^^le fait est que ca ne supporte pas flash donc me faut une solution

---------------
Papier peint design ///Achat papier peint /// ah mais Illustrator, c'comme un "paint

edden

The one and only.

Jette un coup d'œil à ça :jap:

http://syddev.com/jquery.videoBG/

http://www.georgepaterson.com/2011 [...] und-1-0-0/

---------------
The world is sick and we are the doctors.

leserigraphe

Accro au Pomme S

Cool merci, je vais regarder ça avec mes collège mercredi.

D'autre ?

---------------
Papier peint design ///Achat papier peint /// ah mais Illustrator, c'comme un "paint

abais

Le mieux c'est de developper les 2 solution : Avec flash et avec HTML5 (JQ), l'utilisateur étant dirigé vers la soluce compatible...

---------------
Mon PortFolio / WIP de mon futur site perso (flash3D) / Flash 360° Player

leserigraphe

Accro au Pomme S

pas faux,

j'ai juste une crainte un utilisateur qui ne s'y connait pas en web je sais pas si il va savoir choisir..., ceci dit, il y a très peu de chance qu'il ai un ipad ou un smartphone

---------------
Papier peint design ///Achat papier peint /// ah mais Illustrator, c'comme un "paint

edden

The one and only.

De toutes façons la redirection selon qu'il ait flash ou autre est transparente pour l'utilisateur.

Message cité 1 fois

---------------
The world is sick and we are the doctors.

leserigraphe

Accro au Pomme S

edden a écrit :

De toutes façons la redirection selon qu'il ait flash ou autre est transparente pour l'utilisateur.

ah bon ? sans lien à cliquer !!! comment cela se passe ?

Message édité par leserigraphe le 23-12-2011 à 19:22:33

---------------
Papier peint design ///Achat papier peint /// ah mais Illustrator, c'comme un "paint

edden

The one and only.

Ben en intégrant par exemple un petit script qui détectera si flash est présent: si oui, la version flash s'affiche, si non -> redirection vers la version html5

---------------
The world is sick and we are the doctors.

leserigraphe

Accro au Pomme S

tu sais m'en dire plus car moi en code je suis pas vraiment doué

---------------
Papier peint design ///Achat papier peint /// ah mais Illustrator, c'comme un "paint

edden

The one and only.

Ben je pourrais pas trop t'en dire plus, a vrai dire j'ai jamais eu besoin de faire ça, mais tu devrais trouver des infos assez facilement en googlant.

Message édité par edden le 23-12-2011 à 21:02:00

---------------
The world is sick and we are the doctors.

leserigraphe

Accro au Pomme S

oki

---------------
Papier peint design ///Achat papier peint /// ah mais Illustrator, c'comme un "paint

abais

SWFObject (javascript) te permet de savoir si oui ou non, flash est embarqué côté client et te permet de connaitre la version (le mieux c'est d'imposer la version 11, qui integre le "stage video" très performant pour lire la video).

---------------
Mon PortFolio / WIP de mon futur site perso (flash3D) / Flash 360° Player

Publicité

FORUM HardWare.fr

Graphisme

Web design

Mettre une video comme BACKGROUND de site web

Sujets relatifs
[webdesign]Site Ouaibe Noon3 #in progress	Logiciels pour création de site internet (apple)
Envie de critiquer un site ?	Recherche graphiste pour un site de clan de jeux-vidéo
votre avis sur mon site maj le 18/12	Site de Posters en Ligne
Demandes d'avis sur site portfolio/blog sous wordpress	avis sur le design de mon site web drupal
[avis] Votre avis sur mon site d'annonce
Plus de sujets relatifs à : Mettre une video comme BACKGROUND de site web

Page générée en 0.130 secondes