Updated this as I found it is not necessarily nested IFRAMEs, but merely the presence of Flash within the IFRAMEd document that will break position:fixed (also within the IFRAME).
This is unreal. On Safari (Mac):
Flash
...within an IFRAME (e.g., a modal window, Fancybox, etc.)
...will "break" any "position:fixed" elements also within that IFRAME.
Here's a perfect example: http://jsfiddle.net/6GP2A/ Note that we have:
An IFRAME that contains Flash (YouTube video).
within another IFRAMEd doc (jsfiddle IFRAMEs the result)
Please note that the fact that the video is itself IFRAMEd is a red herring. If the Flash were merely an OBJECT tag sans IFRAME you would run into the same issue.
If you open this in Chrome, it will work as expected. The grey "hello I am fixed" DIV (which is postion:fixed) will stay fixed to the bottom.
In Safari, the grey DIV will slide as you scroll the page.
Arrrrgh! Any advice? Countless searches have been fruitless. Thank you!
I encountered the same problem, but we cannot refuse to frames.
So I investigate this problem and I found some solution (I guess):
When there is a div with nested flash in necessary frame and the style of the div with "position: relative; z-index: -1;" then elements with "position: fixed" in the frame looks fine.
For example
<html>
<head>
<style>
.menu {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 40px;
}
.footer {
width: 100%;
height: 40px;
position: fixed;
bottom: 0;
left: 0;
}
</style>
</head>
<body>
<frameset rows="20,*">
<frame>...</frame>
<frame>
<div class="menu">Header</div>
<!-- Some content here -->
<object width="440px" height="220px">
<param value="opaque" name="wmode">
<param value="http://youdomain.com/you_flash.swf" name="movie">
<embed width="440px" height="220px" type="application/x-shockwave-flash" src="http://youdomain.com/you_flash.swf">
</object>
<!-- Some content here -->
<div style="position: relative; z-index:-1;">
<object width="10px" height="10px">
<param value="opaque" name="wmode">
<param value="http://youdomain.com/fake_flash.swf" name="movie">
<embed width="10px" height="10px" type="application/x-shockwave-flash" src="http://youdomain.com/fake_flash.swf">
</object>
</div>
<div class="menu">Footer</div>
</frame>
</frameset>
</body>
</html>
One div with a flash is enough. All the other may be as is.
One remark - you wouldn't be able to click on the flash in this div. I wrote a script which will dynamically add the div with empty flash to Safari on Mac.
Hope this is helpful.
May the Force be with you.
I am using the object tag to display a video in IE. But I can't seem to create a thumbnail image.
<object width="150" height="104" data="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" type="application/x-shockwave-flash" class="vjs-flash-fallback" style="margin-top:-23px; margin-left:-12px;">
<param value="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" name="movie">
<param value="true" name="allowfullscreen">
<param value="config={"clip":{"url":"english_short.mp4","autoPlay":false,"autoBuffering":true}}" name="flashvars">
<!-- Image Fallback. Typically the same as the poster image. -->
<img src="screen.png" width="150" height="104" alt="Poster Image"
title="No video playback capabilities." />
<img class="vjs-poster" style="width: 640px; height: 264px; display: block;" src="http://video-js.zencoder.com/oceans-clip.png"/>
</object>
There's no feature that I know of to do this.
What is usually done instead is a static image is created in an image editor and placed where the image should go. When the user clicks the play button, javascript replaces the image with the video as a seamless transition.
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.
I have a tag to include add a SWF but I would like around it to control it's size.
I have something like the following:
<div style="left: 852px; top: 596px; width: 30px; height: 20px;">
<embed align="middle" type="application/x-shockwave-flash" pluginspage="http://www.adobe.com/go/getflashplayer" allowscriptaccess="always" allowfullscreen="false" wmode="transparent" quality="high" style="overflow: hidden;">
</div>
But unfortunately, the embed tag (SWF) expands from the DIV. I thought overflow:hidden would assure that it does not.
How can I fix this issue please?
Thank you very much,
Rudy
You need to overflow:hidden; on the parent div, the one with dimensions defined.
I want to make it so that when I click anywhere on the embedded Flash element, it takes me to a destination URL.
Here is my current code, which does not produce the desired effect:
<div class="contentdiv" style="margin:-72px 0 10px 0px; cursor:pointer;" onclick="location.href='http://example.com/';">
<object height="410" width="720">
<param name="movie" value="images/tri.swf">
<embed src="images/tri.swf" height="400" width="700">
</embed>
</object>
</div>
Right now it is making the space behind the .swf file clickable for the link, but the Flash element is not clickable.
If the right thing to do is to edit the .swf file somehow, please let me know that. I don't consider myself a Flash developer, but are there any resources on where to get started or how to do something this basic with an existing .swf file?
Any suggestions are much appreciated!
I had the same problem, found this thread, but ended up creating my own solution.
I added transparent element to the link, then made it overlap the embeded swf
<a href="http://example.com/" target="_blank">
<object height="410" width="720"><param name="movie" value="http://www.theslap.com/swf/slap_logo.swf">
<embed src="http://www.theslap.com/swf/slap_logo.swf" height="400" width="700"></embed>
</object>
<i style="display:block; height: 410px; width: 720px; position: relative; z-index: 9; margin-top: -410px;"></i>
</a>
Note - you should probably include the css in a separate file for production code.
Update after more research:
This question has been asked before, and the best answer is that you have to create the link within flash.
Usually this is done dynamically by passing a parameter (conventionally named clickTAG) to the .swf to tell it where to link to.
In your case (since someone else provided your swf files) I can see 2 options:
Your .swf author may have already implemented the clickTAG method (you can ask them, or just try it out on the .swf to see if it works.)
You could make a flash wrapper file that implements clickTag, and have it load and display your .swf file. I know this seems like a hack, but I can't see any other alternatives.
Hope this helps!
I've also seen something like this used [edit: but I can't get it to work! Googling suggests that it's not possible]
<a href="http://example.com/" target="_blank">
<object height="410" width="720"><param name="movie" value="images/tri.swf">
<embed src="images/tri.swf" height="400" width="700"></embed>
</object>
</a>
(For example here)
Put a transparent .gif or .png file over the flash using z-index and just anchor that transparent image with your URL.
You could create your own swf (or have someone do it for you) that has a button editable with FlashVars over the stage and that loads in your subject swf underneath that button.
I've created one for you: Download.
You just need to add two FlashVars when you embed it:
url - The URL that will be visited if the swf is clicked.
swf - The swf file to load.
I got mad to solve the issue.... I tried several tricks including jquery and javascript.
Definitely the SOLUTION that works and works in ALL browser is the one above my reply.
Thanks user user2628529
<div class="containe">
<div style="position:absolute;"> </div>
<div >
<object type='application/x-shockwave-flash' data='http://www.sample.it/banner/banner-one.swf' width='190' height='505'>
<param name='flashvars' value='clickTag=&clickTarget=_self' />
<param name='allowScriptAccess' value='always' />
<param name='movie' value='banner-one.swf' />
<param name='wmode' value='transparent' >
</object>
</div>
</div>
There is a best way i've got found
<div class="flash-wrap">
<a class="flash-link" href="#"></a>
<object type="application/x-shockwave-flash" data="flash.swf" width="180" height="220">
<param name="wmode" value="opaque">
<param name="movie" value="flash.swf" />
<param name="quality" value="high" />
</object>
</div>
.flash-wrap{
position: relative;
}
.flash-link{
position: absolute; top:0px; left:0px;
width:180px; /*Flash Size*/
height:220px;
/*background: url('images/0.gif') no-repeat;*/ /*You should uncommented this line for support old IE version.*/
}
https://gist.github.com/m-pokrovskii/6558817
<div id="logo" >
<div id="linklogo" style="position:absolute;"><img src="transparent.png"></div>
<div id="flashlogo" >
<object type='application/x-shockwave-flash' data='1.swf' width='200' height='86'> <param name='flashvars' value='clickTag=&clickTarget=_self' /><param name='allowScriptAccess' value='always' /><param name='movie' value='1.swf' /><param name="wmode" value="transparent"></object>
</div>
certainly
eliminates the problem in all cases
This worked for me:
<a target="_blank" href="{{ entity.link }}">
<object type="application/x-shockwave-flash" data="{{ entity.file.path }}?clickTAG={{ entity.link }}" width="120" height="600" style="visibility: visible;">
<param name="quality" value="high">
<param name="play" value="true">
<param name="LOOP" value="false">
<param name="wmode" value="transparent">
<param name="allowScriptAccess" value="true">
</object>
</a>
Thank You!
now. It worked
<div style="width: 400px; height: 100px;">
<a href="http://www.sample.com" target="_blank">
<object height="100" width="400"><param name="movie" value="1.swf">
<embed src="1.swf" quality="high" type="application/x-shockwave-flash" wmode="transparent" width="400" height="100" pluginspage="http://www.macromedia.com/go/getflashplayer" allowScriptAccess="always"></embed>
</object>
<i style="display: block; height: 100px; width: 400px; position: relative;z-index: 9;margin-top: -102px;"></i>
</a>
</div>
You can't add a link to a flash object, but you can overlap a transparent image with a link, over the flash object.
This is my example:
<div style="position: relative;">
<div style="position: absolute;
left: 250px;
top: 0px;
z-index: 9999;">
<a href="http://terrazasmedicina.com.ar/hometerrazas.html">
<img src="logoLinkTR.png" width="504" height="103"></a>
</div>
<script type="text/javascript">
AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0','width','1024','height','106','src','banner','quality','high','pluginspage','http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash','movie','banner' ); //end AC code
</script></div>
In my case the object is embeded by a script, but it should work the same.
You have to wrap in a relative div the object and a div with the image, and then position as absolute the div with the image aligning it by left, top, right and bottom properties, and asigning z-index property to overlap the image.