logo标签列表

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

google-chromesvgyoutubeembedz-index
4

问题

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

有人知道为什么视频似乎改变了它的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>​

我创建了一个演示问题的 演示版。
1个回答
1

如果您不想遇到z-index问题，请先输出

<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之后声明圆圈。 - Jack
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接