Whilst putting together a WordPress image gallery for a new client site I came across the old problem of popup image overlays sitting behind embedded YouTube videos.

Firstly here’s a screenshot of the gallery page in question:

Image Gallery With Video Sidebar

And here’s a screenshot of what happens when you click on one of the images in any version of Internet Explorer:

Video on Top of Image Overlay

So what exactly is happening here?

By default YouTube uses an Adobe Flash video player and and the default rendering mode for Flash objects (set by the “wmode” parameter) is “Window” which means it will overlay all other objects on the page, including any popup images. Whilst most modern browsers now handle this scenario properly Internet Explorer still causes the problem shown in the screenshot above.

You can change the z-index of your overlay all you like but it will never sit on top of a Flash object with a “wmode=window” parameter in IE.

This problem can occur with any Flash Object though most web developers avoid using Flash as a development tool these days due to the whole iPhone / iPad compatibility issue. The result is that this is much less likely to be a problem and is also easy to solve by simply giving the Flash Object an additional parameter of “wmode=transparent” or “wmode=transparent”.

Unfortunately when embedded video is delivered from YouTube (or other video streaming sites) you don’t have direct access to the Flash object so simply adding in a new wmode parameter is not a simple option.

OK, now we know the problem, what’s the solutuion?

There are two possible solutions to this problem, the first one uses an HTML5 video player in place of the standard Flash video player and won’t work with versions of Internet Explorer earlier than IE9.

The second method will work in IE6 and up but retains the use of a Flash video player.

Solution 1

This is my preferred solution because it forces YouTube to use the newer HTML5 video player which was created for use on iPhones and iPads which don’t support Flash. Unfortunately this won’t work IE6, IE7 & IE8 as they are not HTML5 compliant.

All you have to do is add

“?html5=1”

to the end of the “src” url in your iframe tag to force YouTube to use it’s HTML5 video player instead of the normal Flash video player.

For example: <iframe src=”http://www.youtube.com/embed/KUDwSz8sDBA?html5=1″ frameborder=”0″ allowfullscreen></iframe>

Solution 2

This method still uses the older Flash video player but will work on older IE browsers from IE6 upwards.

Simply add

“?wmode=transparent”

to the end of the “src” url in your iframe tag to force YouTube to add the “wmode=transparent” parameter to its Flash video player.

For example: <iframe src=”http://www.youtube.com/embed/KUDwSz8sDBA?wmode=transparent” frameborder=”0″ allowfullscreen></iframe>

Solution 3

Fortunately there is also a third option which I discovered by experimenting with adding both parameters to the end of the “src” url as follows:

<iframe src=”http://www.youtube.com/embed/KUDwSz8sDBA?html5=1&wmode=transparent” frameborder=”0″ allowfullscreen></iframe>

What this appears to do is to force YouTube to use the HTML5 video player if the browser supports it, otherwise it will use the Flash video player but apply the “wmode=transparent” parameter to it.

So this Method gives us the best of both worlds, the latest technology where possible and support for older Internet Explorer browsers. And here’s a final screen shot to show the code working in IE9:

Image Overlay on Top of Video

For example: <iframe src=”http://www.youtube.com/embed/KUDwSz8sDBA?html5=1″ frameborder=”0″ allowfullscreen></iframe>

This site is not yet officially launched, we are still polishing the edges and making it smell sweet

Very soon we will have our official launch so please check back regularly for the inevitable competitions, freebies and party

Hello and welcome to the new MADCAT Digital Design Web Site.

MADCAT Digital Design is a family business run by Dave and Maggie Catley. You may have heard about us already through MADCAT Photography our sister business. MADCAT Photography is doing just fine but we’ve been looking at our old industry and feeling for some of the raw deals small business owners are getting in relation to their online strategy.

Between us we have over 50 years experience creating software applications, web sites and online strategies. Maggie is an expert in the use of social media and developing online strategies for small business and Dave has extensive experience in design, software development and photography.

We can work with you to help you develop your online strategy, including:

• Web Sites Design & Development
• Social Media (facebook, twitter, google+, …)
• Content Management
• Online Stores
• Content Optimisation (includes SEO the way Google meant it to be)
• Internet Marketing
• and much more

As small business owners ourselves we understand many of the problems associated with getting your business online and understanding the minefield that is the internet.

Our goal is to work closely with our clients to help you to profit from the many possibilities that the internet has to offer and to also help you gain an understanding of what you are dealing with. Don’t worry, we’ll always be there to back you up and guide you through the internet maze but the better informed you are the more sustainable your online business ventures will be.

What we wont do is make unrealistic guarantees just to get your business or promise to make you instant millionaires, neither will we rock up with slick salesmen who’ll offer you the world so long as you sign up on the spot. That’s not who we are and our integrity is very important to us.

What we will do is be open and honest and continue to work with you to achieve your goals. You won’t be left in the lurch or abandoned with an unfinished web site because you exceeded the exact timeframe alloted to your project. You won’t be left with latin placeholder text “lorem ipsum …” on any of your pages, missing meta tags or functionality that doesn’t do what the slick salesman assured you it would!

We will most likely make mistakes somewhere, we may not be able to solve every problem in a timeframe that we would all like and we may even be late to a meeting every now and then!
BUT …
We will do our best to resolve any issues and fix any problems as well as we can. You see we look on our clients as partners, the better you do the better we do. So long as we are all benefiting from our relationship then things are as they should be.

In fact the one thing that we want most is a Happy Client, because a happy client will recommend us and that’s a much better way to get new business than to employ a slick salesman

If any of this sounds like the way you like to do business then please give us a call and we’ll come and have a chat to see how we can help you and your business. If, however, after reading this you think we’re crazy, unprofessional or you just don’t like the sound of how we work then I can put you in touch with some great “Salesmen” who will sell you whatever you ask for

Cheers,

Dave & Maggie