如何在点击时无缝定位隐藏的 youtube 视频

Question

两个例子：

• https://chill.com/arithegreat/passive-aggressive
• https://www.simple.com

---

类似于模态对话框/灯箱现象。在那个...

• 背景变暗或模糊（但比典型灯箱更本地化）
• 视频/模态的打开是通过点击链接触发的
• 您可以关闭视频，这会 a) 停止播放，b) 隐藏视频，c) 恢复视频替换的内容

但是，它提供了更无缝的体验。在那个...

• 视频定位在页面上的特定元素中（而不是相对于某些页面包装器或视口）
• 视频经常替换/隐藏内容，而不是仅仅停留在上面

这里有一个问题……这两个例子都使用了专有的视频播放器。在这种情况下，这是一个交易破坏者。 我需要它来使用 youtube 的 iframe 嵌入代码（他们的新东西）。

Answer 1

这是一个非常强大的解决方案。但我对 JS 很烂，所以这完全是个黑客工作。随意迭代或发散。

做得不错：

• 在点击链接时“就地”显示/隐藏 youtube 视频
• 一些有趣的背景模糊等作为概念证明
• 流体宽度帧，由于适合视频，包含流体宽度视频

它做的不好：

• .videoWrapper 自动调整为视频的高度（由于适合 vids），这并不理想，因为能够放大/缩小容器以适应它之前保存的内容会很好/之后（而不必坚持视频的最大高度）
• 视频在隐藏时不会停止播放
• 您注意到的任何其他内容。

工作示例： http://codepen.io/jonamar/pen/JAfqc

需要 jQuery 和http://fitvidsjs.com

HTML

<section class="videoWrapper">
<!-- the <h1> and <a> get replaced -->
<h1>Watch the best video ever</h1>
<a class="control play" href="#">Play</a>
<a class="control hide" href="#">Hide</a>
<iframe width="560" height="315" src="http://www.youtube.com/embed/5SjtrUYRYx4?rel=0" frameborder="0" allowfullscreen=""></iframe>
</section>

CSS

* {-webkit-transition-duration: 1s;}

.videoWrapper {
  margin: 0 auto; 
  width: 40%;
  padding: 20px; 
  background: #eee;
  }

iframe, .hide {display: none;}

.showVideo {background: #444;}

.showVideo h1{
  color: transparent;
  text-shadow: 0 0 6px rgba(0,0,0,0.60);
  }

.showVideo a {color: white;}

JS

$(document).ready(function () {

$('.control').click(function () {

  $('.videoWrapper iframe').toggle();
  $('.videoWrapper .play').toggle();
  $('.videoWrapper .hide').toggle();

  var showVideo = $('.videoWrapper').hasClass('showVideo');

  if (showVideo === true) {
    $('.videoWrapper').removeClass('showVideo');
  } else {
    $('.videoWrapper').addClass('showVideo');
  }

});

$(".videoWrapper").fitVids();

});