Youtube 模态弹出关闭问题

Posted 2023-05-09

技术标签:

【中文标题】Youtube 模态弹出关闭问题【英文标题】：Youtube modal popup close issues 【发布时间】：2017-03-22 11:16:30 【问题描述】：

我正在尝试创建一个类似于以下内容的 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>

问题 1 的解决方案有效。问题 2 和 3 的解决方案无效。我打开控制台，它说 $ 未被识别 - blacktrax.cast-soft.com/:329 Uncaught TypeError: $ is not a function(...) 对不起。请将 $ 替换为 jQuery 问题3可以分享截图吗？我注意到（chrome）如果视频播放叠加层变小，它就会被剪切，因此修复了上边距。你能解释一下“最大的问题在于关闭视频并使弹出层响应。” 当然纳西尔！我认为虽然它看起来像它的工作是不是一个很好的经验。我注意到 Udacity (udacity.com) 在移动时强制视频全屏显示。这是截图：imgur.com/a/RuLf6。所以它就像你说的那样发生，它被切断了。正在发生的另一件事是，在 chrome android 上，视频需要一段时间才能下载，而在 android firefox 中运行良好。我注意到 Z 索引问题在两个 android 浏览器上都出现了：imgur.com/a/MQDpI【参考方案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-由于某种原因，当你关闭它时，视频仍在后台运行，当你关闭对话框时它应该停止或重置到开头

【讨论】：

以上是关于Youtube 模态弹出关闭问题的主要内容，如果未能解决你的问题，请参考以下文章

html 在模态中打开YouTube视频，并在关闭模态时将其停止

使用Light YouTube嵌入模态（从基础显示） - 如何在模态窗口关闭后停止视频播放？

以模态自动播放Youtube视频？（Avada Wordpress主题）

弹出窗口关闭时停止 youtube 视频 [重复]

Bootstrap 模式关闭时 Youtube 视频仍在播放

UIWebView 模态 YouTube 播放器“完成”按钮操作