在计算机上查看时，嵌入隐藏div（移动宽度）的YouTube视频无法全屏播放。任何想法如何解决这一问题？

Question

这基本上就是我所拥有的： 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/

正如您在小提琴中看到的那样，首先，视频将不可见。请按照以下步骤重现我的问题：

1-将浏览器调整得更窄，直到视频可见。

2-播放视频，然后单击全屏。

3-当声音在后台播放时，浏览器将展开并且jsFiddle或whitescreen将覆盖视频。

任何人都有此问题的经验吗？我尝试删除css规则，视频工作正常。

截图： 包含视频的整个标签必须隐藏在桌面上。因此我无法避免'display：none'

提前感谢您的帮助！