4

問題

SVG 内に YouTube ビデオを埋め込もうとしています。Chromium (Ubuntu) では期待どおりに動作しますが、Google Chrome (Windows 7) では、再生中にビデオがキャンバスの前面に移動し、再生が停止すると元の位置に戻ります。

ビデオが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>​

問題を示すフィドルを作成しました。

4

1 に答える 1

1

z-indexの問題が発生したくない場合は、最初に<circle>タグを出力してから、ビデオ/ビデオのコンテナを出力します。順序が重要です（最後のオブジェクトが自動的に一番上になります）。また、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>​
于 2012-06-16T20:41:16.510 に答える