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

Question

问题

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

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

还有另一个次要问题(在我的情况下稍微不那么紧迫)，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>​

我创建了一个 fiddle 这说明了问题。

Answer 1

如果你不想出现 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>​