I have an .swf file (a flash animation) that is too big and unfortunately we do not have the source code (the .fla file) anymore. I need to display it in a div, and want to hide part of it.
Any idea?
Thank you.
<div style="width:100px; height:100px; overflow:hidden">
<embed src="http://www.metacafe.com/fplayer/4133817/world_breakdancing.swf" width="400" height="345" wmode="transparent" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" allowFullScreen="true" allowScriptAccess="always" name="Metacafe_4133817"></embed>
</div>
Please note that wmode="transparent" is really important!
If the movie was compiled in wmode=transparent, it should be possible to give the div a fixed width and/or height, and apply overflow: hidden.
According to this, it will work in all current major browsers. In unsupported browsers, the full movie will be above all other page elements.
If the movie was not built transparent, I think there is no way to do this.
Related
I am using an "emailmeform" in an iframe for a contacts page and the background won't go transparent. I have added allowtransparency="true" to the iframe and it's doing nothing.
I know I should add <body style="background:transparent"> into the source to make this normally work but I have the exact same iframe on another page and the transparency works, but trying it on this new page with the same code for some reason doesn't work.
Here's the bog standard iframe code, I just can't see what's going wrong.
<iframe width="100%" height="600" allowtransparency="true" frameborder="0" scrolling="no" style="border:none" src="http://www.emailmeform.com/builder/embed/Mnc79QelZ4v8r">
</iframe>
allowtransparency is NOT in <iframe> specification, thus it is doing nothing. This keyword support is removed since IE9.
background: transparent is doing nothing either. It depends on how browser renders this transparency. In short, avoid using transparent background.
The transparent keyword maps to rgb(0,0,0).
Sidenote: However, similar parameter exists in XUL, but this does not apply to your case.
Reference:
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe
https://developer.mozilla.org/en-US/docs/Web/CSS/background-color
I'm using gigya service for video embed...
If some one paste the following code in his wordpress page or post then horizontal and vertical scrollbar is displaying only in IE browsers....Working fine in Firefox and Chrome..
Here is the code:-
[gigya src="http://s.asstatic.com/player.swf" width="425" height="354" allowFullScreen="true" wmode="transparent" flashvars="file=fb=0&nb=1&ap=0&pl=as&c=#dfdfdf&p=1615781_634907097231053940"]
Please help me what should i put in the above code to remove the scrollbar displaying in IE only...
and here is the links.. please open it in IE8 or IE7...
http://gauravishere.wordpress.com/2012/12/27/test/
Thanks...
position:absolute' works for me...
[gigya src="..." style="position:absolute" width="425" height="354" allowFullScreen="true" wmode="transparent" flashvars="file=fb=0&nb=1&ap=0&pl=as&c=#dfdfdf&p=99..."]
try to fix this type of issue by:
Use html5 doctype if possible:
Set 100% on all parent containers:
*, html, body { height: 100%; width:100%; margin:0; padding:0; }
On my website, I have a big .swf file. The graphic designer made the .swf look like it was in a rounded corner box but when I embed the file, even using transparent wmode, I see the bottom corners showing. I tried using CSS3 and making the swf div a class inside the border div.
CSS Code:
#swf_border{border:3px solid #a1a1a1;height:400px;width:940px;margin:0px 0px 0px 157px;z-index:100;border-radius:13px;-moz-border-radius:13px;}
#swf_border .home_display{height:400px;margin:0 auto 10px;width:940px;}
HTML Code:
<div id="swf_border">
<div class="home_display">
<object width="940" height="400">
<param name="movie" value="/theme/listgiant/swf/home_banner.swf"></param>
<param name="quality" value="high" />
<param name="wmode" value="transparent" />
<param name="swfversion" value="8.0.35.0" />
<embed src="/theme/listgiant/swf/home_banner.swf" width="940" height="400" wmode="transparent"></embed>
</object>
</div><!-- End home_display-->
</div><!-- End swf_border-->
To my knowledge, you can not use CSS3 corners to crop a SWF.
As for your site... there is a gray background in the SWF. Ask your designer to remove it and you should be all set.
Actually, you can use CSS3 to crop a SWF. But I've come across a problem with using CSS3 PIE which I use to enable CSS3 effects in IE8. This .htc script cannot crop a SWF properly even though I have not found any notice about the problem in the CSS3 PIE manual.
Edit:
Opera 11 cannot render rounded corners over flash object either.
My page has some swf object on html.
DespiteI'd like to swf go to the bottom layer
the swf go to the top layer
Any solutions?
Can I swap the priolities a swf with a html element using z-index?
want to solve a variety of environments(IE6,Firefox,Chrome...)
You should use both z-index and wmode:
<param name="wmode" value="transparent"> and in the embed tag style="z-index: -1"
you should set window mode to transparent. Have a look here: http://kb2.adobe.com/cps/142/tn_14201.html
i have an iframe nested inside another iframe, and for both iframes i have these attributes:
frameBorder="0" marginWidth="0" marginHeight="0" scrolling="no"
Ive also tried:
style="border: 0px; margin: 0px; padding: 0px;"
It seems that no matter what I try, the border of the inner iframe keeps showing, as well as the padding within the inner iframe. This is also only the case for IE (v. 8), for firefox it works fine and shows no borders.
Is there any way to get rid of this?
Capitalize the letter B in "frameborder"
<frameBorder="0" ... >
It's an IE thing...
use frameborder="0" attribute:
<iframe frameborder="0" src="..." />
Unfortunately, do not know, how to set this using CSS.
I've spent so much time busting my head over this one :)
If you have not defined any values for the DIV in which your IFRAME is located, a border appears by default. I usually put my IFRAMEs in the body section of a separate HTML file. I add this line of code in my CSS file and boom! Problem solved.
body {
padding:0;
margin:0;
}