Historically a flash video on a website, for example a custom website presentation or a YouTube video, would always sit above anything else on the page.
Recently I was investigating the positioning of a menu drop down hiding below a YouTube flash video.
Increasing the CSS z-index value for the sub-menu was making no difference, it was positioning below the flash video.
In practice the layering of individual web page items the flash object is rendered last, the top most element.
Most annoying to see a drop down menu disappear below the flash video.
Reading on the Internet for a solution to this I saw suggestions regards JavaScript and jQuery.
However, I was looking for a fix for the flash positioning which could be reasonably repeated.
Changes could be made globally, for example via CSS, or with a generic piece of JQuery/JavaScript code.
Thinking of my customers. I wanted the addition of the flash embedding code to the website to be simple and easy. Preferably via the CMS’s editor, with a simple understandable tweak.
Nothing too complicated, the simpler the instructions the better.
I found an article on Stack Overflow which suggested the use of two parameters, one added to the flash file reference and one as a parameter.
This seemed like a good option. It’s clear where the changes are to be made and easy to do.
To correct the way browsers display flash players above all other page content the parameter wmode is added twice.
- once at the end of the YouTube file reference
- once as a separate parameter
Here’s my example modified YouTube flash reference, with the extras in bold:
<iframe width="560" height="315" frameborder="0" src="https://www.youtube.com/embed/4fekwVhg2sw?wmode=transparent" wmode="opaque"></iframe>
The article referenced is
