iPhone YouTube видео Z-индекс

Question

У меня есть встроенное видео на YouTube. У меня также есть меню (при открытии) в верхней части этого видео.

Я установил значение z-index в меню выше, чем у видео. Я также установил для wmode видео значение transparent, чтобы обеспечить доступ к содержимому поверх него.

У меня вообще нет проблем с сафари, т. Е. С Chrome или Firefox на моем компьютере (меню вверху видео, как и должно быть), но на iPhone и iPad - флэш-контент заменяется с большой кликабельной кнопкой YouTube, которая открывает вкладку YouTube внутри приложения YouTube, и эта большая кнопка находится над меню. Кто-нибудь знает, как решить эту проблему?

Спасибо!

Answer 1

Я не уверен, что это то, что вам нужно. Живой пример на jsbin.com поможет. В любом случае, я надеюсь, что следующее будет полезным. Вы можете использовать метод iframe, который предоставляет YouTube для воспроизведения своих видео. Если браузер поддерживает html5, видео будет показываться вместе с ним, в противном случае - со вспышкой. Также он прекрасно играет с iphone / ipad без открытого приложения iphone / ipad.

Вы можете использовать следующий код в качестве примера <<code>iframe class="youtube-player" type="text/html" width="640" height="385" src="http://www.youtube.com/embed/bIPcobKMB94" frameborder="0">

в приведенном выше примере идентификатором видео является bIPcobKMB94. Вы можете изменить этот идентификатор и показать свое видео.

Вы можете получить доступ к своему iphone с живым примером этого здесь

Больше информации для iframe на YouTube

YouTube HTML5 Video Player

Answer 2

К сожалению, Ipad и Iphone не отображают флэш-контент.Он использует версию видео h.264.

Поэтому это совершенно другой плагин, который на самом деле воспроизводит контент и настройка Wmode флеш-файла не будет иметь никакого значения.

РЕДАКТИРОВАТЬ Я посмотрел, и у меня нет решения проблемы ipad / sefari / iphone.

Answer 3

Я тоже столкнулся с этой проблемой.После добавления параметра "wmode=transparent" для кода

<iframe width="480" height="360" src="http://www.youtube.com/embed/111111?wmode=transparent" frameborder="0" allowfullscreen></iframe>,

проблема исправлена.

Answer 4

Я подозреваю, что приложение, используемое для переключения контента, устанавливает встроенный уровень z-index.Я нашел бы идентификатор этого элемента (кнопка или его контейнер) и установил бы z-index ниже, чем у вас z-index меню.Обязательно добавьте «важное» после значения, чтобы оно перезаписывало встроенный стиль.