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

两个示例：

---

这类似于模态对话框/灯箱现象。在这方面

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

但是，它提供了更无缝的体验。在这方面

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

---

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

这是一个非常健壮的解决方案。但我对JS很差劲，所以这完全是一项黑客工作。可以自由地重复或发散

它做得体面：

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

它做得不好的地方：

• .videoWrapper

  会自动调整大小以适应视频的高度（由于适合视频），这并不理想，因为能够放大/缩小容器以适应其前后保存的内容（而不必粘贴视频的最大高度）会很好
• 视频隐藏时不会停止播放
• 还有什么你注意到的吗

工作示例：

需要jQuery和

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>

JS

* {-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;}

$(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();

});