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

Question

有人可以告诉我如何使用 CSS 将下面创建的链接链接到下面的 iframe。我有点希望 iframe 是一个几乎填满屏幕的弹出窗口，但似乎无法理解所需的 CSS!我想首先需要隐藏 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/用于我在品牌 reshape 方面的大学评估。

Answer 1

我将 jquery 用于与此非常相似的东西并且它工作得很好。只需为按钮或您希望 iframe 在单击时弹出的任何内容设置一个 .onclick，然后淡入 iframe。

将 iframe 放在 DOM 的顶部，这样你就可以相对于 View 屏幕定位它，将父 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/