Überlagerung zweier DIVs (Video und transparentes gif)

F

Fenghuang

Grünschnabel
Hallo,

durch einer Überlagerung zweier Divs möchte ich einem Video einen Rahmen (transparentes gif) verleihen.
Leider funktioniert es nicht, das Video ist immer im Vordergrund.
Hier mal der Code...

html
Code: 
<div id="bottom">
	<div id="picture">
		<object classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" codebase="http://www.apple.com/qtactivex/qtplugin.cab" height="430" width="500">
			<param name="src" value="video.avi">
			<param name="autoplay" value="true">
			<param name="target" value="myself">
			<param name="controller" value="false">
			<param name="type" value="video/quicktime" height="430" width="500">
			
			<embed src="video.avi" height="430" width="500" autoplay="true" type="video/quicktime" pluginspage="http://www.apple.com/quicktime/download/" controller="false" target="myself"></embed>
		</object>
	</div> <!--end div picture -->
	<div id="rahmen">
		<img src="rahmen.gif" alt=""/>
	</div>
	<div id="content">
		<h1>Überschrift</h1>
		<p>Text</p>
	</div><!--end div content -->
</div> <!--end div bottom -->

CSS
Code: 
#bottom{
	width:1000px;
	height: 430px;

}	

#picture{
	z-index:1;
	position:absolute;
	left:0;
	width:500px;
	height:430px;
	margin:0;
}	

#rahmen{
	z-index:2;
	position:absolute;
	left:0;
	width:500px;
	height:430px;
}	

#content{
	position:absolute;
	left:550px;
	width:450px;
	height:300px;
	margin-top:95px;
	overflow:auto;
}
Schmeiße ich das Video raus und ersetze es durch ein ganz normales Image, funktioniert die Überlagerung einwandfrei.

Hat jemand eine Idee woran das liegen könnte?

Danke für eure Hilfe

Fenghuang
 
Danke chmee,

stimmt, ist Quicktime. Lieber wär es mir, das Video so einzibinden, wie es youtube macht, habe aber keine Ahnung wie die das machen.

Dein Tipp funktioniert im IE. Beim FF ist jetzt der Rahmen sichtbar, aber dafür wird kein Videlo mehr angezeigt.

Gruß Fenghuang
 
Danke für dein Tip. Das interessante ist, dass das ganze lokal funktioniert, aber sobald ich es hochspiele nicht mehr.

Code: 
<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>HTML5 MediaElement</title>	
	
	<script src="../../media/jquery.js"></script>	
	<script src="../../media/mediaelement-and-player.min.js"></script>
	<link rel="stylesheet" href="../../media/mediaelementplayer.min.css" />
</head>
<body>



<video width="640" height="360" id="player2" poster="../../video/echo.jpg" controls="controls" preload="none">
	<!-- MP4 source must come first for iOS -->
	<source type="video/mp4" src="../../video/echo.mp4" />
	<!-- WebM for Firefox 4 and Opera -->
	<source type="video/webm" src="../../video/echo.webm" />
	<!-- OGG for Firefox 3 -->
	<source type="video/ogg" src="../../video/echo.ogv" />
	<!-- Fallback flash player for no-HTML5 browsers with JavaScript turned off -->
	<object width="640" height="360" type="application/x-shockwave-flash" data="../../media/flashmediaelement.swf"> 		
		<param name="movie" value="../../media/flashmediaelement.swf" /> 
		<param name="flashvars" value="controls=true&amp;file=../../video/echo.mp4" /> 		
		<!-- Image fall back for non-HTML5 browser with JavaScript turned off and no Flash player installed -->
		<img src="../../video/echo.jpg" width="640" height="360" alt="Here we are" 
			title="No video playback capabilities" />
	</object> 	
</video>

<span id="player2-mode"></span>

<script>

$('audio,video').mediaelementplayer({
	success: function(player, node) {
		$('#' + node.id + '-mode').html('mode: ' + player.pluginType);
	}
});

</script>

</body>
</html>

Selbst die größe des Videos ist am Server anders als lokal.

Woran kann das liegen?

Danke

Fenghuang
 
Nachdem das Thema inzwischen nichts mehr mit css zu tun hat, schließe ich mal es mal und starte anderswo ein neues.

Danke für deine Hilfe

Fenghuang
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück