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

Question

两个例子：

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

---

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

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

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

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

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

Answer 1

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

它做得体面：

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

它做的不好：

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

工作示例： 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();

});