在Fancybox iframe中使用自定义HTML和YouTube视频

时间:2011-04-27 17:10:18

标签: jquery youtube fancybox

我正在尝试使用Fancybox打开YouTube视频,但在Fancybox窗口中还有一些额外的HTML。因此,最终目标是让视频从YouTube中拉出,然后在其下方显示一些文字,并从我的网站上了解更多按钮。我不想嵌入视频。

我考虑将视频网址作为变量传递,但我觉得应该有一种更简单的方法。我在fancybox页面上解析url时遇到了问题。

<script>
$(document).ready(function() {
    $("a.youtube").click(function() {
       var vidLink = $(this).attr("rel");
         $.fancybox({
           'href'   : 'player.html?page=' + vidLink,
            'type'  : 'iframe'
        });
    });
});
</script>

<a class="youtube" href="#" rel="http://www.youtube.com/watch?v=rvAK5crfRLc">The Video</a>

然后在player.html上

<script>
    function show_video() {
      var newVid = urlParams["vidLink"];
      document.getElementById("vidPlayer").setAttribute('src', newVid);
    }
</script>

<iframe id="vidPlayer" src="" width="400" height="225" frameborder="0"></iframe>
<h3><a href="#">Learn More</a></h3>

1 个答案:

答案 0 :(得分:0)

player.html永远无法从查询字符串中获取变量。你将不得不使用像PHP这样的东西来获取变量。

您还可以使用javascript并通过location.search对象读取所有查询字符串参数。

See Here