YouTube iframe embedded in SVG moves to front whilst playing in Chrome

Question

The Problem

I am trying to embed a YouTube video inside an SVG. It works as expected on Chromium (Ubuntu), but on Google Chrome (Windows 7) the video moves itself to the front of the canvas whilst playing, then back to its original position when playback has stopped.

Does anyone know why the video seems to change it's z-index, and how it can be stopped?

There is another secondary issue (slightly less pressing in my case) where Firefox displays no video, only audio when playing the video.

The Code

I am using the following HTML to embed the video:

<svg height="600" version="1.1" width="550" xmlns="http://www.w3.org/2000/svg">
    <foreignObject x="10" y="10" height="300" width="500">
        <div xmlns="http://www.w3.org/1999/xhtml">
            <iframe xmlns="http://www.w3.org/1999/xhtml" width="500" height="300"
                    src="http://www.youtube.com/embed/jOV1-mkIOd0?wmode=opaque"
                    frameborder="0">
            </iframe>
        </div>
    </foreignObject>
    <circle cx="250" cy="250" r="150" fill="#ff0000"></circle>
</svg>​

I've created a fiddle which demonstrates the problem.

Answer 1

If you don't want to have z-index issues, output the <circle> tag first, then the video/video's container; the order matters (the last object will automatically be on top). Also make sure youkeep the "wmode=opaque" parameter declared on YouTube videos like you already had it, as without that, the video will come on top regardless.

<svg height="600" version="1.1" width="550" xmlns="http://www.w3.org/2000/svg">
    <circle cx="250" cy="250" r="150" fill="#ff0000"></circle>
    <foreignObject x="10" y="10" height="300" width="500">
        <div xmlns="http://www.w3.org/1999/xhtml">
            <iframe xmlns="http://www.w3.org/1999/xhtml" width="500" height="300"
                    src="http://www.youtube.com/embed/jOV1-mkIOd0?wmode=opaque"
                    frameborder="0">
            </iframe>
        </div>
    </foreignObject>
</svg>​