28172 sujets

CSS et mise en forme, CSS3

(RESOLU) Video swf en background sans utiliser HTML5

Bonjour à toutes et à tous.

Je souhaite mettre une vidéo au format .swf en fond d'écran et mettre par dessus tout le reste des éléments du site : logo, menu, textes et images.

Actuellement, même en utilisant la propriété z-index, la vidéo se positionne dessus les images et le menu. Seul le texte est visible.

Mon code html :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
    <head>
	<title></title>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<meta http-equiv="Content-Style-Type" content="text/css" />
	<meta http-equiv="Content-Language" content="fr" />    
	<link href="css/css-pixiel.css" rel="stylesheet" type="text/css" />
	<script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script>
    </head>
    <body>
	    <div id="video">
		<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="1024" height="576" id="intro" align="middle">
				<param name="movie" value="swf/intro.swf" />
				<param name="quality" value="high" />
				<param name="bgcolor" value="#000" />
				<param name="play" value="true" />
				<param name="loop" value="true" />
				<param name="wmode" value="window" />
				<param name="scale" value="showall" />
				<param name="menu" value="true" />
				<param name="devicefont" value="false" />
				<param name="salign" value="" />
				<param name="allowScriptAccess" value="sameDomain" />
				<!--[if !IE]>-->
				<object type="application/x-shockwave-flash" data="swf/intro.swf" width="1024" height="576">
					<param name="movie" value="swf/intro.swf" />
					<param name="quality" value="high" />
					<param name="bgcolor" value="#OOO" />
					<param name="play" value="true" />
					<param name="loop" value="true" />
					<param name="wmode" value="window" />
					<param name="scale" value="showall" />
					<param name="menu" value="true" />
					<param name="devicefont" value="false" />
					<param name="salign" value="" />
					<param name="allowScriptAccess" value="sameDomain" />
				<!--<![endif]-->
					<a href="http://www.adobe.com/go/getflash">
						<img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Obtenir Adobe Flash Player" />
					</a>
				<!--[if !IE]>-->
				</object>
				<!--<![endif]-->
		</object>
	    </div>
	<div id="conteneur">
	<div id="contenuaccueil">
	    <div id="header">
		<a id="logo" href="index.html">
		    <img src="images/logo.png" />
		</a>
		<div id="menu">
		    <ul id="menulist">
			<li><a href="lien">Réalisations</a></li>
			<li><a href="lien">Prestations</a></li>
			<li><a href="lien">Technique</a></li>
			<li><a href="lien">Contact</a></li>
			<li><a href="lien">Espace client</a></li>
		    </ul>
		</div>
		<img src="images/barre-menu.png" id="filetmenu" />
	    </div>
	    <div id="footeraccueil">
		<div id="partie1">
		    <p><a href="lien">texte</a><br/>
		    <a href="lien" style="color:#555555; font-size:1.1em;">texte</a><br/>
		    texte</p>
		</div>
		<div id="partie2">
		    <h1>texte</h1>
		    <p>texte<br/>
		    texte</p>
		</div>
		<div id="partie3">
		    <h1>texte</h1>
		    <p>texte<br/>
		    texte<br/>
		    texte</p>
		</div>    
		<div id="partie4">
		    <h1>texte</h1>
		    <p>texte<br/>
		    texte<br/>
		    texte</p>
		</div>
	    </div>
	</div>
	</div>
    </body>
</html>


Mon code css :

@charset "utf-8";
/* CSS Document */
 
body
{
    margin:10px 0;
    padding:0;
    text-align:center;
    font:0.8em Arial, Helvetica, sans-serif;    
    background:#000;
}

#conteneur
{
    width:1024px;
    height:576px;
    margin:0 auto;
    padding:0;
    text-align:left;
}

a img
{
    border: 0;
}
 
 
/******************** CODE SPECIFIQUE A LA PAGE INDEX ********************/
#video
{
    width:1024px;
    height:576px;
    margin:0;
    padding:0;
    z-index:1;
}

#contenuaccueil
{
    margin-top:-576px;
    padding:0;
    background:url("../images/fond-accueil.png") no-repeat;
    z-index:2;
}

#footeraccueil
{
    margin:0;
    padding:0;
    width:1024px;
    height:485px;
    background:url("../images/barre-footer-accueil.png") no-repeat;
    z-index:2;
}
/*************************************************************************/


/********************* HEADER POUR TOUTES LES PAGES **********************/
#header
{
    padding-top:5px;
    height:88px;
    width:1024px;
    z-index:2;
}

#logo
{
    width:152px;
    height:88px;
    margin-left:5px;
    float:left;
    z-index:2;
}

#menu
{
    width:600px;
    height:28px;
    margin-left:432px;
    z-index:2;
}

#menulist, #menulist ul   
{
    padding:0;
    margin:0;
    list-style:none;
    line-height:21px;
    text-align:center;
}

#menulist a
{
    display:block;
    padding-top:5px;
    color:#999999;
    font-size:1.3em;
    font-family:Arial, Helvetica, sans-serif;
    text-decoration:none;
    width:112px;
    height:28px;
    background:url("../images/cadre-menu.png") no-repeat;        
}

#menulist a:hover
{
    color:#66C6E4;
    text-decoration:none;
    background:url("../images/cadre-menu-survol.png") no-repeat;        
}

#menulist li     
{ 
    float:left; 
    /* pour IE qui ne reconnaît pas "transparent" */
    border-right:7px solid #fff;
}

/* IE ne reconnaissant pas le sélecteur ">" */
html>body #menulist li
{
    border-right:7px solid transparent;
}


#filetmenu
{
    background:url("../images/barre-menu.png") top;
    height:1px;
    width:868px;
    padding:0;
    margin-top:-60px;
    display:block;
    float:right;
    z-index:2;
}
/*************************************************************************/


/*************** ELEMENTS DU FOOTER POUR TOUTES LES PAGES ****************/
#partie1
{
    width:62px;
    height:62px;
    padding-top:420px;
    padding-left:5px;
    
}

#partie1 p
{
    width:62px;
    height:62px;
    margin:0;
    padding:0;
    color:#555555;
    font-size:0.6em;
}

#partie1 p a:hover
{
    text-decoration:none;
    color:#66C6E4;    
}

#partie1 p a
{
    width:62px;
    height:62px;
    margin:0;
    padding:0;    
    text-decoration:none;
    color:#999999;
    font-size:1.5em;
}

#partie2
{
    width:317px;
    height:62px;
    margin-left:84px;
    margin-top:-62px;
    padding:0;
}

#partie2 h1
{
    margin-top:15px;
    margin-left:5px;
    padding:0;   
    color:#66C6E4;
    font-size:1.3em;
}

#partie2 p
{
    width:225px;
    height:62px;
    margin-left:70px;
    margin-top:-50px;
    padding:0;
    color:#999999;
}

#partie3
{
    width:317px;
    height:62px;
    margin-left:400px;
    margin-top:-77px;
    padding:0;
}

#partie3 h1
{
    margin-top:15px;
    margin-left:5px;
    padding:0;   
    color:#66C6E4;
    font-size:1.3em;
}

#partie3 p
{
    width:182px;
    height:62px;
    margin-left:113px;
    margin-top:-50px;
    padding:0;
    color:#999999;   
}

#partie4
{
    width:317px;
    height:62px;
    margin-left:717px;
    margin-top:-77px;
    padding:0;
}

#partie4 h1
{
    margin-top:15px;
    margin-left:5px;
    padding:0;   
    color:#66C6E4;
    font-size:1.3em;
}

#partie4 p
{
    width:187px;
    height:62px;
    margin-left:110px;
    margin-top:-50px;
    padding:0;
    color:#999999;
}
/*************************************************************************/


J'ai fait exprès de ne pas centrer la vidéo par rapport au reste du contenu pour que vous puissiez visualiser ce que je vous ai expliqué. S'il vous manque des précisions, n'hésitez pas à me le dire. Smiley cligne

Je ne souhaite pas utiliser HTML5 et j'aimerai savoir si ma demande est réalisable. Smiley sweatdrop
Je continue de chercher de mon côté et vous remercie pour votre aide et vos commentaires et remarques.

Bonne journée à vous, Smiley biggrin
Modifié par mama5 (21 Feb 2011 - 23:33)
Après plusieurs tests, il apparaît en fait que, dès que l'on donne une propriété CSS à une image ou bien à un menu (dans ce cas, horizontal), ces éléments vont se placer derrière la vidéo.

Si le CSS concernant les images et le menu est désactivé, l'ensemble des éléments du site apparaît devant la vidéo. Smiley ohwell

L'une ou l'un d'entre vous saurait-il pourquoi ?

En vous remerciant pour vos infos, Smiley smile je continue de chercher de mon côté ! Smiley cligne
Bon je vois que personne n'a pu me répondre et de mon côté, je n'ai trouvé que deux solutions :
- avoir recours au HTML5 Smiley decu
- faire une animation Flash qui comprend tous les éléments de la page d'accueil. Smiley ohwell

Par contre j'aurai tout de même souhaité avoir une réponse sur le fait que la vidéo au format SWF cache les éléments qui ont des propriétés CSS.
Je n'arrive pas à m'expliquer pourquoi la vidéo réagit comme ça avec le CSS et je n'ai pas trouvé de réponse dans mes diverses recherches.

Merci à vous pour vos éclaircissements,
Bonjour,

J'ai solutionné mon problème.

Cela vient d'un paramètre de l'objet Flash. Il faut passer le paramètre "wmode" de "opaque" à "transparent" et là le flash se met en arrière-plan.

Et par conséquent, j'ai réussi à mettre ma vidéo en arrière-plan et tous mes éléments, avec les propriétés CSS, par dessus ! Smiley biggrin
et voici : ###

Attention, j'ai pas encore corrigé les erreurs d'affichage sous IE

EDIT : J'ai enlevé le lien. Si vous souhaitez voir le rendu final, n'hésitez pas à m'envoyer un message privé.
Modifié par mama5 (26 Feb 2011 - 23:16)
Sujet clos
Aller à