Как скрыть IFrame на мобильных устройствах

Я создаю веб-сайт, который использует IFrames для воспроизведения видео на YouTube, вместо того, чтобы загружать необработанное видео, поскольку хост не позволяет загружать большие файлы, и было проще использовать IFrames. Однако, как работает веб-сайт, когда вы нажимаете кнопку, он открывает divверхнюю часть остальной части страницы, например, «всплывающее окно». Таким образом, это требует, чтобы вы могли скрыть IFrame, когда вы закрываете div.

Однако это не работает на мобильных Chrome Safari (для последних версий iOS10). Когда я пытаюсь скрыть это, остальная часть div скрывается, как обычно, но видео оставляет впечатление, так как вы не можете воспроизвести его или щелкнуть что-либо на видео, но оно также не позволяет щелкнуть что-либо под видео.

Кто-нибудь сталкивался с такими проблемами? Может ли кто-нибудь предложить, где мой код не так?

Веб-сайт находится по адресу http://citm.uk.tn/

Вот код:

JavaScript:

function fillText(a){
  $('#body').load('html/' + a + '.html');
  b.style.height = '60vw';
  b.style.visibility = 'visible';
  ex.style.filter = 'blur(20px)';
  ex.style.WebkitFilter = 'blur(20px)';
  window.scrollTo(0,0);
}
function wipePop(){
  b.style.height = '0';
  b.style.visibility = 'hidden';
  ex.style.filter = 'none';
  ex.style.WebkitFilter = 'none';
  frame.style.height = '0';
  frame.style.opacity = '0';
}

HTML:

<a class='back' onclick='wipePop()'>Back To Home</a>
<iframe class='video' src="https://www.youtube.com/embed/YXwYJyrKK5A?wmode=opaque" frameborder="0" allowfullscreen id="frame">
</iframe>

Подробнее HTML:

<div class='ex' id='ex'>
<div class='banner'><img src='images/full.png' class='full' id='im'></div>
<div class='buttons'><button class='cir' id='1'><img class='buttonimg' src='images/1.png'></button><button class='cir' id='2'><img class='buttonimg' src='images/2.png'></button><button class='cir' id='3'><img class='buttonimg' src='images/3.png'></button><button class='cir' id='4'><img class='buttonimg' src='images/4.png'></button></div>

<div class='videobanner'><button class='vidbanner_l' onclick="fillText('video1')"><img src='images/video.png'></button><button class='vidbanner' onclick="fillText('video2')"><img src='images/video2.png'></button></div>
<br><br><br>
</div>
<div class='body' id='body'>

</div>

Я использую jQuery, но все, что использует чистый javascript, будет предпочтительнее. Заранее спасибо.