Question

我正在建立一个使用IFrame播放YouTube视频的网站，而不是上传原始视频，因为主持人不允许大文件上传，而且使用IFrame似乎更容易。但是，网站的工作方式是，当您按下按钮时，会在页面其余部分的顶部打开div，就像弹出一个＆＃39;我猜。因此，这需要您在关闭div时隐藏IFrame。

但是，这并不适用于Safari的移动Chrome（适用于iOS10最新版本）。当我试图隐藏它时，div的其余部分会像平时一样隐藏，但视频留下了印象，因为您无法播放或点击视频上的任何内容，但它也会阻止您点击视频下的任何内容。< / p>

有没有人遇到过这样的问题？任何人都可以建议我的代码出错了吗？

网站位于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的东西都是首选。提前谢谢。

如何在移动设备上隐藏IFrame

0 个答案: