youtube видео блокирует кнопки на мобильном браузере

не могли бы вы помочь мне со следующим случаем: У меня есть видео на YouTube.youtube видео блокирует кнопки на мобильном браузере

<iframe width="400" height="225" src=http://www.youtube.com/embed/jKIfjiIjd? 
rel=0& color=white&iv_load_policy=3&theme=light" frameborder="0" allowfullscreen></iframe>

Ниже и выше этого видео у меня есть некоторые элементы формы, как

<button class = "button" id = "video" type = "submit" onClick = "javascript: somefunction();" >some value</button>

видео находится в своем собственном DIV, кнопки и образующие элементы находятся в своих собственных дивы.

Кнопки прекрасно работают на настольных браузерах, однако на мобильных браузерах эти кнопки, которые находятся под видео, невозможно щелкнуть (верхние кнопки работают нормально) Я понял, что если я удалю видео со страницы, все кнопки начинают работать. Кнопки также работают в течение первых нескольких секунд, прежде чем видео будет полностью загружено. Таким образом, похоже, что видео невидимо перекрывает область размером 100-150 пикселей под ним и делает невозможным для пользователей мобильного браузера щелчок по любому элементу. (ps Ive пытался использовать z-индекс 1000 - без эффекта)

Пожалуйста, помогите. Спасибо за ваше время.

источник

2013-05-15 user2331090

дополнительная информация, это выглядит как видео незримо сохраняет оригинальный Hight на видео YouTube (480) и блокирует каждый элемент 480px под верхней частью видео – user2331090

, дополнительная информация, кнопки работают, когда видео воспроизводится (или закончено воспроизведение), например, если перед воспроизведением он имеет высоту 480 пикселей (хотя я вижу заданный 250px) и после запуска перешел на 250px. – user2331090

У меня такая же проблема с iFrame YouTube. Я тестировал весь день. Вот где я нахожусь:

Проблема заключается в том, что элемент внутри iFrame YouTube.

<video class="video-stream html5-main-video" controls="true" 
x-webkit-airplay="allow" data-youtube-id="..............."></video>

Если вы покажете: none ', или измените его на' top: 0 '. Это устраняет проблему.

Однако, поскольку он находится внутри iFrame, я не знаю, как его изменить.

источник

2013-05-16 21:12:51 Taz

Поток Google на этом. https://code.google.com/p/gdata-issues/issues/detail?can=2&start=0&num=100&q=&colspec=API%20ID%20Type%20Status%20Priority%20Stars%20Summary&groupby=&sort=&id=4569 – Taz

Чтобы добавить к этому обсуждению прикрепленного является ссылка на скрипку вопроса здесь:

http://jsfiddle.net/krismeister/KynXG/5/

//<script src="http://www.youtube.com/player_api"></script> 
<h1>The youtube iframe has a video tag which on iPad blocks touches on elements beneath the iframe.<br><em>tap below the video and you will see no color change.</em></h1> 
<div id="vid-placeholder"></div> 
<div id="bg"></div>

источник

2013-05-21 02:30:14

youtube видео блокирует кнопки на мобильном браузере

ответ

Смежные вопросы