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

【问题标题】：Use custom HTML with YouTube video in Fancybox iframe在 Fancybox iframe 中使用自定义 HTML 和 YouTube 视频
【发布时间】：2011-04-27 17:10:17
【问题描述】：

我正在尝试使用 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>

【问题讨论】：

标签： jquery youtube fancybox

【解决方案1】：

player.html 永远无法从查询字符串中获取变量。您必须使用 PHP 之类的东西来获取变量。

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

See Here

【讨论】：