Hawaiʻi's Technology Community
WordPress theme menus problems with Multimedia
I have a problem when I insert a QuickTime movie or Flash graphic into a WordPress post. The problem is that the drop-down menu on the post page falls 'behind' the QuickTime movie instead of in front.
To combat this I inserted the following embed codes in the html for the movie: <param name="wmode" value="transparent"> and wmode="transparent"
So that would appear to fix the drop-down problem but it creates a new problem for Safari on Snow Leopard for Macs. The QuickTime controls don't work on the movies. You can start/stop the movie by using the spacebar but the transparent layer kills access to the controls when either QuickTime X or QuickTime 7.x is used in Safari.Seems to work fine in Firefox. Got the opposite problem in Firefox, the transparency code breaks-up the css drop-downs.
It might be easier to show the problem via examples which follow:
No transparency code example
transparency code embedded example
Is there a away around the drop-down bug so I don't have to use the transparency embed code? The drop-down bug also occurs in IE8 I believe. If you choose the Sports drop-down you should see what I'm talking about in the first example.
To combat this I inserted the following embed codes in the html for the movie: <param name="wmode" value="transparent"> and wmode="transparent"
So that would appear to fix the drop-down problem but it creates a new problem for Safari on Snow Leopard for Macs. The QuickTime controls don't work on the movies. You can start/stop the movie by using the spacebar but the transparent layer kills access to the controls when either QuickTime X or QuickTime 7.x is used in Safari.
It might be easier to show the problem via examples which follow:
No transparency code example
transparency code embedded example
Is there a away around the drop-down bug so I don't have to use the transparency embed code? The drop-down bug also occurs in IE8 I believe. If you choose the Sports drop-down you should see what I'm talking about in the first example.
Views: 82
Replies to This Discussion
-
Permalink Reply by Ryan Hohnbaum on
-
Interesting problem, I've never encountered that before but here's an article that mentions a fix for this sort of CSS problem. Try setting the z-index of the div holding the embedded object to 1 and the z-index of the div holding the nav to 2. This should do the trick.
Source:
http://wphacks.com/fixing-css-drop-down-menus-hiding-behind-flash-o... -
-
Permalink Reply by MediaBaron on
-
Actually that's what I'm doing now. I'm adding both of those parameters into the code. Okay, I redid the original post with the ascii ISO code so it shows-up properly. Safari on Snow Leopard is just broken. I'll have to email Apple again.
Ryan Hohnbaum said:Interesting problem, I've never encountered that before but here's an article that mentions a fix for this sort of CSS problem. Try setting the z-index of the div holding the embedded object to 1 and the z-index of the div holding the nav to 2. This should do the trick.
Source: http://wphacks.com/fixing-css-drop-down-menus-hiding-behind-flash-o... -
-
-
Well, the solution was to somewhat ditch QuickTime for videos and just use Flash. Apple has really botched things with the new dumbed-down, limited QuickTime X.
So now I'm just going to post Flash videos and have a link for iPhone users to view an M4V video file. -
-
Permalink Reply by Rob Bertholf on
-
My recommendation is to switch to SWFObject for embedding media, there is a very easy to use plugin called WP-SWFObject which I recommend.
As for the menu falling behind the object it can be fixed easily using CSS as Ryan indicated. See more on W3Schools:
http://www.w3schools.com/Css/pr_pos_z-index.asp -
© 2024 Created by Daniel Leuck.
Powered by
