Youtube 链接、iframe 和 css 使其看起来像一个弹出窗口

Question

有人可以告诉我如何使用 CSS 将下面创建的链接链接到下面的 iframe。我有点希望 iframe 是一个几乎填满屏幕但似乎无法理解所需 CSS 的弹出窗口！我想 iframe 需要先隐藏，但我真的需要帮助。谢谢大家的帮助

iframe

<iframe width="420" height="345" src="http://www.youtube.com/embed/oHg5SJYRHA0?autoplay=1" frameborder="0" allowfullscreen></iframe>

html

<a href="http://youtu.be/oHg5SJYRHA0" target="_blank" class="play clearfix proximaBold relative"><span class="cta floatL">through the eyes of a bigsmile advert</span><span class="playIco floatL"></span></a>

我正在努力实现与 http://adayinbigdata.com/ 此处的视频相同的效果，以用于我的大学品牌重塑评估。

Answer 1

我将 jquery 用于与此非常相似的东西，并且效果很好。只需为按钮添加 .onclick 或任何您希望 iframe 在单击时弹出的内容，然后淡入 iframe。

将 iframe 放在 DOM 的顶部，这样您就可以将它相对于视图屏幕定位，并将父 div 放置在 iframe 上，这样您就可以使页面变灰，从而产生 iframe 位于页面顶部的错觉弹出窗口。

你只要把这行写出来

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

在头脑中。这将连接到 jquery 库。 然后将此代码放入文档中的任何位置。

<script type="text/javascript">
$(document).ready(function(){

  $('#vid_button').click (function(){
    $('#pop-up').fadeIn(1000);
  });

}); 
</script>

“#vid_button”是您希望视频在单击时弹出的按钮。而“#vid”是您要弹出的实际视频。 .fadeIn 旁边括号中的数字是 iframe 出现所需的毫秒数。所以这需要 1 秒才能完成。

这是一个 jsfiddle：http://jsfiddle.net/42Kru/2/