Встроенный в SVG фрейм YouTube перемещается вперед во время игры в Chrome

Question

Эта проблема

Я пытаюсь вставить видео на YouTube в SVG. Он работает, как и ожидалось, в Chromium (Ubuntu), но в Google Chrome (Windows 7) во время воспроизведения видео перемещается к передней части холста, а затем возвращается в исходное положение после остановки воспроизведения.

Кто-нибудь знает, почему видео, похоже, меняет свой 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>​

Я создал скрипку, которая демонстрирует проблему.

Answer 1

Если вы не хотите, чтобы возникли проблемы с z-index, сначала выведите тег , а затем контейнер видео / видео; порядок имеет значение (последний объект автоматически будет сверху). Также убедитесь, что вы указали параметр "wmode=opaque", объявленный на видео YouTube, так, как если бы он у вас уже был, так как без этого видео в любом случае будет первым.

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