I need to make my dropdown menu apprear over the top of a flash movie, how is this done cross browser?
It can be done, IBM do it: http://www.ibm.com/us/ so do GE: http://www.ge.com/
Setting the the WMODE to transparent doesn't work for Firefox
Putting it into an Iframe doesnt work below IE7
Any one know the best way to achieve this?
Set the wmode to transparent and if necessary, use z-index as you would on any other element, that really should work for Firefox too.
here is an example with all three modes: opaque, transparent and no wmode at all
http://www.communitymx.com/content/source/E5141/wmodeopaque.htm
use transparent if you have something under the flash movie that you want visible,
opaque if you don't want to show what's underneath
and set a higher z-index for menu than the flash movie has
Firefox for linux shows flash on top of everything. Regardles of wmode or z-index.
EDIT:
I just found out that the Linux issue described above can be "fixed".
You need to add an iframe with a z-index between the swf and the layer you want to put on top of it. The iframe needs to have style="display:none" initially and you must use javascript to set display:block on it after the flash plugin has initialized. The Iframe will hide all swfs that are below it on linux.
Related
I want to write an extension for Chrome (as seems the easiest option) that would show notifications on top of a full screen video.
For example, say you're watching a Netflix video, the chrome recognises what video you're watching, checks databases for popups, and if it found some, it shows them at specific times (say when video is at 1:05 or something).
While most of the parts seem doable, main question is, how to display some HTML element on top of a video that is in full-screen mode?
Thanks a lot!
Edit
After some research and links provided by the answer, I could not find an answer for Flash players - I guess that is not (easily) possible.
However, as per my example, I tested Netflix videos, and whether it's fullscreen or not, a simple div with absolute positioning and high value for z-index was visible at all times. As many of the systems are now are or moving onto HTML5 video's, the simple solution should apply to all of them.
Thanks Marc Guiselin for helping.
I asked this a while back for my extension: Force a div to show up and overlay whatever is in fullscreen
The result was this: you can't on things like flash, however, I found out you can detect if an html element is in fullscreen in your content script using document.fullscreenElement||document.webkitFullscreenElement.
If it's null, nothing is in full screen, but if isn't, then you can append stuff to it while its in fullscreen.
Also if you want to do this, you might want to allow your content scripts to work within iframes using "all_frames": true in your manifest, since a lot of sites now use embeded iframe html5 players that can go full screen.
Good luck.
Not sure if this is a problem due to using transparent backgrounds, but I am using a webview to show a webpage to the user, however if the user loads another url from a link or javascript is used to dynamically insert new content into the page the rendering seems to glitch.
By glitch I mean that the page remains in the background whilst the new content / page is loaded in the foreground. They end up overlapping and making everything very unreadable.
I have hardwareacceleration turned off on my webview to enable transparent background, could that be causing the problem?
It's similar to this question Android Webview Content Overlapping While Using Transparent Background.
Many thanks.
This was due to the fact I had transparent background on, I removed this and it was okay. Not the best solution but one that is preferred over having glitchy graphics. I mimiced the transparent background by matching the CSS background properties to that of where my WebView was positioned.
Had the same problem on Google TV boxes and managed to fix this by forcing WebKit to redraw the DOM from jQuery as in:
$('<style></style>').appendTo($(document.body)).remove();
or (if you don't like jQuery):
document.body.style.display='none';
document.body.offsetHeight;
document.body.style.display='block';
You can inject either of the code fragments dynamically from Android as in webView.loadUrl("javascript:(function(){ /* put the force-redraw-code here */ })()") or do it directly from JavaScript after you altered the DOM.
More related fixes at How can I force WebKit to redraw/repaint to propagate style changes?
I am having an interesting problem. I want to have a box with a border overlaid on top of a vlc web player. I can get it to work just fine if the background color is not transparent, but as soon as I set it to transparent, it gets drawn behind the player. Does anyone know how to get around this?
Here is a jsfiddle that shows what I am talking about (You need to have vlc web plugin installed in order for this to work. Additionally, you can only do overlays with firefox, for some reason).
http://jsfiddle.net/AsGuL/21/
This post is old, but if someone with the same problem find it (like me), here is the solution :
VLC plugin have the attribute "windowless" you can use in this situation.
Just add windowless="true" in the embed tag.
From the documentation :
windowless: (since VLC version 2.0.6) Draw the video on a window-less (non-accelerated) surface and allow styling (CSS overlay, 3D transformations, and much more). Default: false
https://wiki.videolan.org/Documentation:WebPlugin
I want to create a custom video control, I mean over the video itself, with issues like double click on some x and y coordinates of the video to zoom In, but I can't get this result because the real player plugin API is not that flexible, then I Tried to create a transparent layer to handle those events and I can't achieve that the transparent layer sits on top of the video, I tried this list:
1.- Put a flash transparent movie over the real player plugin- not working the player breaks the z-Index and the video goes to the top.
2.- Put an Iframe transparent over the real player plugin- not working it puts on top, but when I make the Iframe transparent, the movie goes agains to the top.
3.- I tried to use the map html tag, also is not working.
4.-I tried to put and div absolute positioned, but z-index is not working.
I need some help with this topic.
thanks guys
There is no reliable way to force a browser to layer content on top of a plugin, because plugins like Flash just talk to the video/audio system rather directly and just paint in the bounding box the browser tells them to.
Obviously it's still experimental, and there's no IE support (without ChromeFrame), but was designed to solve exactly this problem.
If this was Flash you could use wmode=opaque or wmode=transparent as an alternative to the default wmode=windowed, which is much faster but causes problems with overlays like you describe. I've found no sign of an equivalent option for real player.
http://javafx.com/ would be my recommendation
I would avoid trying to mash several different technologies together to get what you want, It will make for a maintenance nightmare between different browsers and browser upgrades.
I think this is what you search for:
http://www.dynamicdrive.com/forums/showpost.php?s=4cc8a233f39321ad1ee9e01ec57a3bef&p=200817&postcount=10
You need the wmode = opaque to get the layer over the flash.
a place where you can find this working is, www.dtele.de .
If you open the navigation, you´ll see, tha it lays over the flash movie.
I have a Flash movie embedded in some DIV. The trouble is that when I change any property of the enclosing DIV dynamically, Firefox (not other browsers) restarts/reinitializes Flash movie effectively resetting the whole progress (eg: file selection for upload, etc.).
Is there some sort of a workaround for this?
Try hiding it with visibility:hidden or if all else fails, position:absolute;left:-9999px.
I presume Firefox doesn't want to waste memory and CPU on Flash animation that's invisible, so it kills it.
see https://bugzilla.mozilla.org/show_bug.cgi?id=90268
Yes, it seems like Firefox kills the flashes instances that are not visible.
I had the same problem in Firefox 3.6.13 and Flash Player 10.2.152. I tryed with "visibility:hidden" and "position:absolute" but didn't work even with "wmode=opaque".
For me the solution was setting the "wmode" to opaque, "position:absolute" and "opacity:0", but it´s not possible to set the "top" property to negative or whatever "position", "overflow" or "margin" hack. The entire movie need to have its "space reserved" in the page to avoid Firefox killing it.
I needed to toggle the visibility between two flash movies with the same size, so, the solution was setting the opacity of one of them to 0 and changing their z-index properties to put forward the active one. It worked fine.