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

Stop the music and go home

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

Publicité

genghis77

-_-'

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

---------------
Genghis achat/vente

leserigraphe

Stop the music and go home

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

Profil supprimé

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

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

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

leserigraphe

Stop the music and go home

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

D'autre ?

abais

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

---------------
Le membre ci-contre n'est pas responsable du message ci-dessus.

leserigraphe

Stop the music and go home

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

Profil supprimé

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

Message cité 1 fois

leserigraphe

Stop the music and go home

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

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

Profil supprimé

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

Publicité

leserigraphe

Stop the music and go home

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

Profil supprimé

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 Profil supprimé le 23-12-2011 à 21:02:00

leserigraphe

Stop the music and go home

oki

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

---------------
Le membre ci-contre n'est pas responsable du message ci-dessus.

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 ?	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.044 secondes