Google chrome 嵌入在SVG中的YouTube iframe在Chrome中播放时移动到前面 问题

我正在尝试将YouTube视频嵌入到SVG中。它在Chromium（Ubuntu）上可以正常工作，但在GoogleChrome（Windows7）上，视频在播放时会自动移动到画布的前面，然后在播放停止时返回到原始位置

有人知道为什么视频会改变它的z索引，以及如何停止吗

还有另一个次要问题（在我的例子中稍微不那么紧迫），Firefox在播放视频时不显示视频，只显示音频

代码 我正在使用以下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>​

​

---

我已经创建了一个来演示问题。

如果您不想出现z索引问题，请先输出标记，然后输出视频/视频的容器；顺序很重要（最后一个对象将自动位于顶部）。还要确保在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>​

​

不幸的是，我希望圆圈显示在YouTube视频的顶部（无论它是否正在播放），因此我必须在foreignObject之后声明圆圈。