28172 sujets

CSS et mise en forme, CSS3

Superposer une <div> à fond transparent sur un <object> ?

Bonjour,

J'aimerai afficher une <div> avec un fond noir transparent en superposition d'un player qui se trouve dans une balise <object>.

Aucun problème pour la superposition d'une <div> sur un <object> avec un fond de n'importe quelle couleur opaque. Mais impossible lorsque cette <div> a un fond transparent, que ce soit avec une couleur en alpha / opacity / autre OU avec un .png / .gif ! Smiley sweatdrop

J'ai pu tester qu'il est également impossible de couvrir un player Youtube contenu dans une <iframe> ...

Est-ce tout simplement impossible de superposer une <div> à fond transparent sur un <object> ou <iframe>? Smiley eek Smiley decu

Merci pour votre aide, je peux vous donner des informations complémentaires si sur le principe c'est cens fonctionner !
Modifié par web_acteur (08 Jul 2011 - 12:03)
C'est rempli de PHP et conditionnel, je sais pas si cela sera forcément plus claire ! J'essaie d'illustrer mon problème avec des bouts statiques ...
le HTML :


<div id="zone_player">
	<div id="player">
		<h2><img src="" alt="" /></h2>
		div id="retour_live"> 
        		<a href="" title=""><img src="" alt=""/></a>
        	</div>
		<object id="video" data="data:application/x-silverlight-2," type="application/x-silverlight-2">
                	<param name="..." value="..."/>
			<param name="..." value="..."/>
			<param name="..." value="..."/>
                </object>
	</div>
</div>


le CSS :


#player {
	margin-bottom:40px !important;
	float:left;
	width:610px;
	background-color:#000000;
	position:relative;
}
#video {
	width:610px;
	height:460px;
}
#retour_live {
	position:absolute;
	z-index:10;
	width:610px;
	height:460px;
	background-image:url(../images/modele/opaque.png); 
	background-repeat:repeat; 
}


Le tout avec du jQuery pour cacher et faire apparaître cette div #retour_live sur #video au passage de la souris sur la div #player (puisque là aussi on ne peut détecter un .hover sur #video qui est un object !)
Modifié par web_acteur (13 Jul 2011 - 12:27)
Je confirme (d'après un test rapide) que ça ne fonctionne pas sous Chrome, Firefox, IE9 : la div disparait. Et sous Opera la transparence devient inopérante.

Je ne connais pas d'astuce pour faire ça.

Mon test :


<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document sans nom</title>
<style type="text/css">
body {
 margin: 0;
 padding: 0;	
}

div {
 position: absolute;
 top: 0;
 left: 0;
 width: 560px;
 height: 349px;
 background: #f00;
 opacity: 0.9;
}
</style>
</head>

<body>
<object width="560" height="349">
	<param name="movie" value="http://www.youtube.com/v/vuITlx0jF9k?version=3&amp;hl=fr_FR"></param>
	<param name="allowFullScreen" value="true"></param>
	<param name="allowscriptaccess" value="always"></param>
	<param name="wmode" value="transparent" />
	<embed src="http://www.youtube.com/v/vuITlx0jF9k?version=3&amp;hl=fr_FR" type="application/x-shockwave-flash" wmode="transparent" width="560" height="349" allowscriptaccess="always" allowfullscreen="true"></embed>
</object>
</body>
</html>

Modifié par jb_gfx (13 Jul 2011 - 12:15)
Et oui jb_gfx, c'est bien ça le problème ! Donc encore un commentaire dans ce sens, et j'en conclus que ce que je veux faire et impossible !
Bonjour,

Testé avec le code ci-dessus légèrement modifié et ça fonctionne avec Firefox 5, Chrome 12 et IE9


<!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"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Document sans nom</title> 
<style type="text/css"> 
body { 
 margin: 0; 
 padding: 0;     
} 
 
div { 
 position: absolute; 
 top: 0; 
 left: 0; 
 width: 560px; 
 height: 349px; 
 background: #f00; 
 opacity: 0.7; 
} 
</style> 
</head> 
 
<body>
<div></div>
<object width="560" height="349"> 
    <param name="movie" value="http://www.youtube.com/v/vuITlx0jF9k?version=3&amp;hl=fr_FR"></param> 
    <param name="allowFullScreen" value="true"></param> 
    <param name="allowscriptaccess" value="always"></param> 
    <param name="wmode" value="transparent" /> 
    <embed src="http://www.youtube.com/v/vuITlx0jF9k?version=3&amp;hl=fr_FR" type="application/x-shockwave-flash" wmode="transparent" width="560" height="349" allowscriptaccess="always" allowfullscreen="true"></embed> 
</object> 

</body>
J'ai pas eu le temps de mettre en œuvre ta solution Shunkin mais j'ai pu voir que cela fonctionne sur ton exemple. Par contre en quoi c'est légèrement modifié si ce n'est la <div> </div> oubliée dans l'exemple du dessous et l'opacité ?

ptitvincent, je cherche à proposer d'autres vidéos à l'occasion d'un rollover sur la vidéo en cours de lecture Smiley smile D'où la transparence est plus confortable pour avoir toujours un œil sur la vidéo en cours, mais surtout plus sexy qu'un panneau opaque qui recouvre !
Bon juste pour la science,

Ca :


<!doctype html>
<head>

</head>
<body>

<object style="position:relative" height="349" width="560">
    <div style="width:100%;height:120px;border:1px solid #fff;position:absolute;z-index:100">
        <div style="float:left;margin-left:10px;width:100px;height:50px;background-color:#000"></div>
        <div style="float:left;margin-left:10px;width:100px;height:50px;background-color:#000"></div>
    </div>
    <param value="http://www.youtube.com/v/8NvgyYHeY4o?version=3&amp;hl=fr_FR&amp;rel=0" name="movie">
    <param value="true" name="allowFullScreen"><param value="always" name="allowscriptaccess">
    <embed allowfullscreen="true" allowscriptaccess="always" type="application/x-shockwave-flash" src="http://www.youtube.com/v/8NvgyYHeY4o?version=3&amp;hl=fr_FR&amp;rel=0" height="349" width="560">
</object>

</body>
</html>


c'est une grosse magouille et ca marche pas partout.. Mais j'ai trouvé ca marrant de mettre un div dans une balise object Smiley smile
Sujet clos
Aller à