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
Related
I am trying to embed .swf file into html page.
Width and Height of swf is 1024*768.
I specify 'width' and 'height' as 100%.
<div style="width:100%;height:100%;">
<object style="width:100%;height:100%;">
<embed src="frontend/flash.swf" width="100%" height="100%" >
</object>
</div>
It embeds swf with 1350px*150px for some reason, not 100% of the height of the file.
If I specify dimensions in pixels for tag embed, it will work.
But I am very curious, why it does not work with %.
Thank, any help will be appreciated.
You can try swfobject: https://github.com/swfobject/swfobject.
It`s very simple to add Flash and Flashvars.
Here with 100%:
http://learnswfobject.com/advanced-topics/100-width-and-height-in-browser/
swfobject.embedSWF("test.swf", "flashContent", "100%", "100%", "9.0.0", false, flashvars, params, attributes);
You should lookup the tag in the html docs on the Mozilla Developer Network. It specifies that the embed tag has attribute height that is the displayed height in CSS pixels. Since 100% is not a valid pixel value it will not recognize that value.
I am creating an web-application using node-webkit, which bases on googles chrome browser.
When embedding a pdf file on a site, using the embed tag, ich get a white line on the top of the embeded part (picture attached). My first thought was, that it is a kind of border, but setting border = 0 dont resolves the problem.
My suggestion is, that this white line is part of the background of the embed part and adobes pdf plugin doesnt covers the whole embed area.
Edit
If my suggestion is true, then it would already help me if i could switch the background of the embed area to an other color. But setting background-color doesnt works too.
Margin and padding has to be set to 0 on the html/body.
If you add:
body {
margin:0;
padding:0;
}
That should sort your problem out.
try to use <iframe></iframe> tag. set the source of your file in src atribute. you can set the height or width of iframe tag as you set your embed tag.
example : <iframe src="http://example.example/file.pdf" width="500" height="400"></iframe>
or you can set the application to open the file you attached to your website
might it help! :D
I would like to place a static image on top of the YouTube Video Player; however, it appears as if they somehow block this from occurring?
So far I have tried setting the z-index higher than the YouTube player but this does not work.
For example:
<img src="../example.png"/ width="100" height="100" class="image" />
<iframe width="420" height="315" src="http://www.youtube.com/embed/k6U-i4gXkLM" frameborder="0" allowfullscreen></iframe>
.image { position: absolute; z-index: 10000; }
Your code works perfectly. Just the slash after "../example.png" is unnecessary but it will work anyway.
You should be able to add wmode=transparent to the youtube iframe url. See:
Youtube iframe wmode issue
A working example:
http://www.parentmap.local/article/webinar-parents-guide-to-college-admissions
Notice how the flyout menu overlaps the video iframe.
If that won't work for some reason, you could load the youtube preview image using javascript, then put your overlay on top of that. Only load the real iframe when someone actually clicks the element.
Quick googling finds this on youtube images:
http://www.reelseo.com/youtube-thumbnail-image/
Example from that page of preview image URL:
http://img.youtube.com/vi/bQVoAWSP7k4/0.jpg
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.
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.