Question

您好我正在试图弄清楚如何进行操作

1.单击页面上的图像

2.这会将youtube视频叠加在当前页面上

3.点击屏幕的任何透明部分将使用户返回到所述页面

我添加了一个屏幕截图，以帮助说明我的方案。感谢您提前的帮助，这是我正在进行的一个侧面项目！我想在附加图像之前需要更多声誉，所以我添加了一个jing截图。 http://screencast.com/t/ceBkx8K1Cy7

Answer 1

这是一个非常简单的方法，我认为无需插件即可满足您的需求。您可以使用视频大小和位置，但逻辑不会改变。显示视频后，点击“测试”按钮。按钮不会触发默认事件（和警报） - 而是与视频外的整个区域相同。隐藏视频后，TEST链接将正常工作。请使用全屏＆＃39;运行代码段时的选项。

如果要在隐藏div时停止播放视频，则需要动态加载iframe作为按钮单击功能的一部分，然后在隐藏它时将div html设置为''。

＆＃13;

$('#btn').click(function() {
  $('#video, #overlay').fadeIn('slow');
  $('#video-container').html('<iframe width=560 height=315 src=https://www.youtube.com/embed/OMOga8x6aLk frameborder=0 allowfullscreen></iframe>');
});

$(document).on('touchend, mouseup', function(e) {
  if (!$('#video').is(e.target)) {
    $('#video, #overlay').fadeOut('slow');
    $('#video-container').html('');
  }
});

$('#btn2').click(function() {
  alert('video is not visible');
});

＆＃13;

#container {
  width: 600px;
  height: 600px;
  border: 2px solid #888888;
  position: relative;
  text-align: center;
}
#overlay {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1;
  height: 100%;
  width: 100%;
  background: #ffffff;
  opacity: 0.6;
  display: none;
}
#video {
  display: none;
  position: absolute;
  top: 15%;
  left: 10%;
  width: 80%;
  z-index: 2;
}
#video-container {
  position: relative;
  padding-bottom: 56.25%;
  padding-top: 30px;
  height: 0;
  overflow: hidden;
}
#video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
  <button id="btn">CLICK ME</button>
  <br>
  <br>
  <button id="btn2">TEST</button>

  <div id="overlay"></div>

  <div id="video">
    <div id="video-container"></div>
  </div>
</div>

＆＃13;

编辑：出于某种原因，Youtube视频不能在SO沙盒中播放，我现在没有时间弄清楚原因。这是一个FIDDLE，它很好（相同的代码）。

编辑2：更新了代码，以提供视频容器的响应大小/位置。

编辑3：添加了对touchend事件的支持。

如何在您的网站上叠加YouTube视频

1 个答案: