youtube video blocks buttons on mobile browser -


could me following case: have youtube video on website.

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

beneath , above video have form elements like

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

the video in own div, buttons , form elements in own divs.

the buttons work on desktop browsers, on mobile browsers buttons, beneath video impossible click (top buttons working fine) figured out if remove video page, buttons start working. buttons work first few seconds before video loaded. so, looks, video invisibly overlapping area 100-150px beneath , makes impossible mobile browser users click on element. (ps ive tried use z-index of 1000 - no effect)

please, help. thank time.

i'm having exact same issue youtube iframe. i've been testing day. here i'm at:

the problem element inside youtube iframe.

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

if 'display:none' that, or change 'top:0'. fixes problem.

however, since it's inside iframe, dont know how change it.


Comments

Popular posts from this blog

jquery - How can I dynamically add a browser tab? -

node.js - Getting the socket id,user id pair of a logged in user(s) -

keyboard - C++ GetAsyncKeyState alternative -