I have a problem with an flash object. The object is an expanding topbanner, but when retracted, the on mouse over effect still appears on the invisible part of the banner. The code is the following:
<div id="exp_banner" style="width:930px; height:180px; overflow: hidden; position: absolute; z-index: 100;">
<object type="application/x-shockwave-flash" data="test.swf" width="930" height="360">
<param name="movie" value="test.swf">
<param name="allowScriptAccess" value="always" />
<param name="quality" value="high" />
<param name="wmode" value="transparent" />
</object>
</div>
I have tried to add a style height to the object with an height of 180px, but then the banner scales down.
make position:relative for parent DIV to make overflow work
and keep wmode="transparent" also to overflow work good for flash object
Related
I have a div containing a Flash Player:
<div id="player">
<div id="player2">
<object type="application/x-shockwave-flash" data="flash/player_mp3_maxi.swf" height="20" width="25">
<param name="movie" value="flash/player_mp3_maxi.swf">
<param name="bgcolor" value="#e2dcde" />
<param name="FlashVars" value="mp3=file.mp3&showslider=0&autoplay=1&loop=1&width=25">
</object>
</div>
</div>
I need to make the div with id player semitransparent. So I applied the CSS property opacity to it:
#player{
opacity: 0.3;
}
This works in Chrome, FF, IE8. But not in Opera 12.16. I need to make it work in this browser.
In Opera12 opacity isn't applied to the Flash Player. How can I solve it?
You need to add one more parameter to your object, "wmode=opaque". This way:
<param value="opaque" name="wmode">
is it possible to load multiple swf files directly on top of each other? I feel like I'm close using divs with different z-indexing, but what about the flash player? Am I wrong in thinking that for each swf there is an individual flash player associated with it? And if that is true, can they be stacked directly on top of each other(on the z-axis)?
thanks for clearing this up for me. I don't want to beat my head against the wall if it is structurally impossible.
to clarify this: you would only be able to see the top swf, but if it were removed, say with swfobject.removeSWF(), there would be another one in the exact same location, but with a lower Z-index
Sure it's possible. See this jsFiddle example.
HTML
<div id="a">
<object type="application/x-shockwave-flash" data="http://edmullen.net/flash/relog.swf" width="200" height="200">
<param name="movie" value="http://edmullen.net/flash/relog.swf" />
<param name="WMode" value="Transparent" />
</object>
</div>
<div id="b">
<object type="application/x-shockwave-flash" data="http://edmullen.net/flash/relog.swf" width="200" height="200">
<param name="movie" value="http://edmullen.net/flash/relog.swf" />
<param name="WMode" value="Transparent" />
</object>
</div>
CSS
#a {
position:absolute;
top:0;
left:0;
z-index:10;
}
#b {
position:absolute;
top:100px;
left:100px;
z-index:20;
}
I have the following code:
<object width="1000" classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" codebase="http://www.apple.com/qtactivex/qtplugin.cab">
<param id="FileNameParam" runat="server" name="src" />
<param name="controller" value="true" />
<embed id="EmbedObj" runat="server" width="1000" autoplay="false" controller="true" scale="aspect" pluginspage="http://www.apple.com/quicktime/download/" type="video/quicktime" />
</object>
As there is no height attribute set for this element, I was expecting the video to fill the width, and the height to be proportion to this (just like an img element).
But instead, the width of the element 1000px, but the actual player (the video and the toolbar) are 100px * 150px.
Why is this?
How can I get the video to fill the width, and the height to be proportional?
Have you noticed, that you yourself have set the width to be 1000? When i tried with no setting, it was just fine..
i have a swf object in my page, and i want it to have 100%width (entire screen) but i want the swf to be aligned to the left. with the following code it gives me the 100%width but the swf is aligned to the center of the page, is there a way to change the alignment? thanks!
<object type="application/x-shockwave-flash" data="http://localhost/arquitectos/flsh/menu.swf?" height="120px" width="100%">
<param value="http://localhost/arquitectos/flsh/menu.swf?" name="movie">
<param value="bgcolor" name="">
<param value="transparent" name="wmode">
<param value="left" name="align"></object>
Try this -
<td align="left>
<object type="application/x-shockwave-flash" data="http://localhost/arquitectos/flsh/menu.swf?" height="120px" width="800px">
<param value="http://localhost/arquitectos/flsh/menu.swf?" name="movie">
<param value="bgcolor" name="">
<param value="transparent" name="wmode">
<param value="left" name="align"></object>
</td>
Having an issue with overlaying a png on a vimeo video, seem to have it working on all mac browsers but Firefox, Internet Explorer etc. on Windows seem to ignore it and place it behind.
This is the site example, it's the black 'Download Reel' button: http://www.warface.co.uk/clients/detail-shoppe
Many thanks
HTML
<div class="video-block">
<a class="download-reel left">Download Reel</a>
</div>
CSS
.download-reel {
width:139px;
height:32px;
display:block;
top:-5px;
text-indent: -4000px;
z-index: 11;
position: absolute;
}
and the video embed code:
<object width="720" height="405"><param name="allowfullscreen" value="true" />
<param name="allowscriptaccess" value="always" />
<param name="movie" value="http://vimeo.com/moogaloop.swf?clip_id=11479633&server=vimeo.com&show_title=0&show_byline=0&show_portrait=0&color=15bedc&fullscreen=1" />
<embed src="http://vimeo.com/moogaloop.swf?clip_id=11479633&server=vimeo.com&show_title=0&show_byline=0&show_portrait=0&color=15bedc&fullscreen=1" type="application/x-shockwave-flash" allowfullscreen="true" allowscriptaccess="always" width="720" height="405">
</embed></object>
By default an object/embed's wmode is "window", meaning it's layered over top of any browser element(s) other than the same elements.
You need to supply a wmode of "opaque" or "transparent", you usually want the latter.
<param name="wmode" value="transparent"> or <embed wmode="transparent"> depending on the element.
Z-index will only work on divs that have been positioned absolute or relative.
Also it sometimes won't work if you use it on the div if the div is nested within another. Try adding z-index and position:relative to the parent div, or the parent of that div.