Youtube模式弹出关闭问题

Question

我正在尝试创建一个类似于此的youtube模式：https://www.udacity.com/但是在使用视觉作曲家的wordpress中。

我对这个模态有3个问题：

1 - 当点击背景图层不会覆盖顶部导航菜单内容时，它们仍会显示。如何强制背景拉伸并覆盖菜单？

2 - 滚动条被隐藏但用户仍然可以向下滚动滚轮，页面下方的一些元素显示在弹出图层的顶部

3 - 最大的问题在于关闭视频并使弹出图层响应。原始代码具有固定的大小，我改为百分比并使其工作但在移动设备中看起来非常奇怪

链接到页面：

http://blacktrax.cast-soft.com/lighting-test-2/

CSS：

/* begining of master container for popup */

.mm-product-video-modal-container {
  position: fixed;
  top: 0px;
  left: 0px;
  z-index: 10000;
  width: 100%;
  height: 100%;
  background: #03070D;
  display: none;
  overflow: hidden; /* hides the scrollbar for the master container popup */
}


/* end of master container */

.mm-product-video-modal-container.open {
  display: block;
}

.mm-product-video-modal-close:hover {
  cursor: pointer;
}

.mm-product-video-modal-close {
  color: #fff;
  position: fixed;
  z-index: 1000000000;
  top: 20px;
  right: 20px;
  font-size: 40px;
}


/* begining of video modal container*/
.mm-product-video-modal {
  width: 70%;
  height: 70%;
  max-height: 664px;
  overflow: hidden;
  position: relative;
  top: -1000px; /* position where the video modal box is generated*/
  text-align: center; /* centralized video*/
  vertical-align: middle;
  border-radius: 4px;
}
/* end of video modal container */

.mm-product-video-modal.open {
  top: 150px;
  margin-bottom: 150px;
}

.mm-video-overlay {
  position: fixed;
  top: 0px;
  left: 0px;
  background: transparent;
  width: 100%;
  height: 100%;
  z-index: -1;
}

.mm-launch-container {
  margin-top: 2em;
}

.mm-launch {
  border: none;
  color: #ffff;
  padding: 5px 60px;
  font-size: 25px;
}

.mm-launch-container p {
  text-align: justify;
  font-size: 16px;
  font-weight: 300;
  margin-bottom: 30px;
}

.mm-launch-container h2 {
  font-size: 50px;
  font-weight: 800;
  letter-spacing: -1px;
  margin-bottom: 20px;
}

.dropper {
    transition: top 0.5s ease-in-out;
}

使用Javascript：

<script type="text/javascript">

function onYouTubeIframeAPIReady() {
  player = new YT.Player('video-placeholder', {
    width: 1180,
    height: 664,
    videoId: 'gZC1TOLVi60',
    events: {
      onReady: initialize
    }
  });
}
function initialize(){

}            

function deployVideo() {
  jQuery('.mm-product-video-modal-container').addClass('open');
  setTimeout(function() {
    jQuery('.mm-product-video-modal').addClass('open');
    player.playVideo();
  }, 250);
}

function destroyVideo() {
  jQuery('.mm-product-video-modal').removeClass('open');
  setTimeout(function() {
    jQuery('.mm-product-video-modal-container').removeClass('open');
    player.pauseVideo();
  }, 250);
}

jQuery('.mm-video-overlay').on('click', function() {
  destroyVideo();
});

jQuery('.mm-launch').on('click',function() {
  deployVideo();
});

</script>

HTML：

<script src="https://www.youtube.com/iframe_api"></script>
<div align="center" class="mm-product-video-modal-container">
    <div class="mm-product-video-modal dropper">
        <div class="embed-responsive embed-responsive-16by9">
            <div id="video-placeholder"></div>
        </div>
    </div>
    <div class="mm-video-overlay"></div>
</div>

<div class="mm-launch-container container" align="center">
  <div class="col-sm-offset-3 col-sm-6">
  <button class="mm-launch">Launch Video</button>
  </div>
</div>

这是插入代码的方式：

Answer 1

问题1：

您需要将标题z-index设置为较低的值，然后设置为叠加层。 在样式中添加以下css类以覆盖标题z-index。

header{
   z-index:1 !important;
}

同时将css类mm-video-overlay的z-index调整为1001

.mm-video-overlay {
  position: fixed;
  top: 0px;
  left: 0px;
  background: transparent;
  width: 100%;
  height: 100%;
  z-index: 1001;
}

问题2：

当显示播放器叠加层时，您需要在正文上使用属性overflow:hidden，然后在关闭视频叠加层时将其删除。

在js中使用的代码：

function deployVideo() {
  jQuery('.mm-product-video-modal-container').addClass('open');
  setTimeout(function() {
    jQuery('.mm-product-video-modal').addClass('open');
    player.playVideo();
  }, 250);
  jQuery('body').css('overflow','hidden');
}

function destroyVideo() {
  jQuery('.mm-product-video-modal').removeClass('open');
  setTimeout(function() {
    jQuery('.mm-product-video-modal-container').removeClass('open');
    player.pauseVideo();
  }, 250);
  jQuery('body').css('overflow','');
}

这将处理滚动问题

问题3：

将top属性设置为css类mm-product-video-modal.open的百分比为15％

.mm-product-video-modal.open {
   top: 15%;
   margin-bottom: 150px;
}

Answer 2

我找到了解决此问题的方法：

完整的HTML代码：

<script src="https://www.youtube.com/iframe_api"></script>
<div align="center" class="mm-product-video-modal-container">
    <div class="mm-product-video-modal dropper">
        <div class="embed-responsive embed-responsive-16by9">
            <div id="video-placeholder"></div>
        </div>
    </div>
    <div class="mm-video-overlay"></div>
</div>

<div class="mm-launch-container container" align="center">
  <div class="col-sm-offset-3 col-sm-6">
  <button class="mm-launch">Watch the video</button>
  </div>
</div>

完整的JAVASCRIPT代码：

<script type="text/javascript">

function onYouTubeIframeAPIReady() {
  player = new YT.Player('video-placeholder', {
    width: 1180,
    height: 664,
    videoId: 'gZC1TOLVi60',
    events: {
      onReady: initialize
    }
  });
}
function initialize(){

}            

function deployVideo() {
  jQuery('.mm-product-video-modal-container').addClass('open');
  setTimeout(function() {
    jQuery('.mm-product-video-modal').addClass('open');
    player.playVideo();
  }, 250);
  jQuery('body').css('overflow','hidden');
}

function destroyVideo() {
  jQuery('.mm-product-video-modal').removeClass('open');
  setTimeout(function() {
    jQuery('.mm-product-video-modal-container').removeClass('open');
    player.pauseVideo();
  }, 250);
  jQuery('body').css('overflow','');
}

jQuery('.mm-video-overlay').on('click', function() {
  destroyVideo();
});

jQuery('.mm-launch').on('click',function() {
  deployVideo();
});

</script>

但是我仍然有2个问题。

1 - 在阅读文档并考虑到我在Javascript / Jquery中完全是新手之后，我无法添加将playerVars：{'autoplay'：1，'controls'：2}添加到函数函数onYouTubeIframeAPIReady

部分JAVASCRIPT代码：

function onYouTubeIframeAPIReady() {
  player = new YT.Player('video-placeholder', {
    width: 1180,
    height: 664,
    videoId: 'gZC1TOLVi60',
    playerVars: { 'controls':2 },
    events: {
      onReady: initialize
    }
  });
}

注意：由于某种原因，playerVars中的控件不起作用，我尝试过0,1,2并且没有任何方法可以显示控件

2 - 由于某种原因，当您关闭视频时，视频仍在后台运行，当您关闭对话框时，视频应停止或重置为开头