html - When viewed on a computer, a youtube video embedded in a hidden div (mobile width) cannot play in full screen. Any ideas how to fix this? -


this have: html

<div class="mobile"> <iframe width="560" height="315" src="https://www.youtube.com/embed/gl2wm05cxkc" frameborder="0" allowfullscreen></iframe> </div> 

css:

@media (min-width: 600px){   .mobile{display: none;} } 

https://jsfiddle.net/0sshjqrz/

as can see in fiddle, first, video not visible. follow these steps reproduce issue:

1- resize browser narrower until video becomes visible.

2- play video, , click fullscreen.

3- browser expand , jsfiddle or whitescreen cover video while sound plays in background.

anyone has experience issue? tried removing css rule , video works fine.

screenshot: enter image description here entire tab videos has hidden on desktop. therefore cannot avoid 'display: none'

thanks in advance help!


Comments

Popular posts from this blog

angular - DownloadURL return null in below code -

meteor - inserting data to database gives error "insert failed: Method '/texts/insert' not found" -