在 Chrome 中播放时，嵌入 SVG 的 YouTube iframe 会移到前面

问题

我正在尝试将 YouTube 视频嵌入到 SVG 中。它在 Chromium (Ubuntu) 上按预期工作，但在 Google Chrome (Windows 7) 上，视频在播放时会自行移动到画布的前面，然后在播放停止时返回到其原始位置。

有谁知道为什么视频似乎改变了它的 z-index，以及如何停止它？

还有另一个次要问题（在我的情况下稍微不那么紧迫），Firefox 在播放视频时不显示视频，仅显示音频。

The Code

我使用以下 HTML 来嵌入视频：

<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>​

我创建了一个fiddle http://jsfiddle.net/qydzm/25/这说明了问题。

如果你不想出现 z-index 问题，请先输出 标签，然后输出视频/视频的容器；顺序很重要（最后一个对象将自动位于顶部）。另外，请确保保留在 YouTube 视频上声明的“wmode=opaque”参数，就像您已经拥有它一样，因为如果没有该参数，视频无论如何都会出现在顶部。

<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>​