使用 Fancybox 自动播放嵌入的 Youtube 视频

发布于 2024-10-20 08:13:35 字数 876 浏览 1 评论 0原文

我的页面上有一个链接图像，单击该图像会加载 Fancybox 模式框。它成功完成了此操作，但我希望视频自动播放。如果我将 YouTube URL 设置为 autoplay=1，隐藏的 DIV 将在页面加载时在后台播放。

// Here is the linked image
<a id="inline" href="#video"><img src="someimage.jpg" alt="Description" /></a>

// Here is the hidden DIV
<div style="display:none">
  <div id="video">
    <iframe title="YouTube video player" width="640" height="390" src="###YOUTUBE LINK###rel=0&amp;hd=1&amp;autoplay=0" frameborder="0"></iframe>
  </div>
</div>

// Here is the script
<script type="text/javascript">
  $("a#inline").fancybox({
    'hideOnContentClick': true,
  });
</script>

我的猜测是我需要执行某种 Bind() 事件和字符串替换，以将 autoplay=0 更改为 autoplay=1 但我有尝试了一些变化但没有成功

有什么想法吗？

原文

I have on my page a linked image which when clicked loads up a Fancybox modal box. It does this successfully but I want the video to autoplay. If I set the YouTube URL to autoplay=1, the hidden DIV plays in the background on page load.

// Here is the linked image
<a id="inline" href="#video"><img src="someimage.jpg" alt="Description" /></a>

// Here is the hidden DIV
<div style="display:none">
  <div id="video">
    <iframe title="YouTube video player" width="640" height="390" src="###YOUTUBE LINK###rel=0&hd=1&autoplay=0" frameborder="0"></iframe>
  </div>
</div>

// Here is the script
<script type="text/javascript">
  $("a#inline").fancybox({
    'hideOnContentClick': true,
  });
</script>

My guess is I need to do some sort of Bind() event and string replace to change autoplay=0 to autoplay=1 but I have tried a few variations without any success

Any thoughts please?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

请叫√我孤独 2024-10-27 08:13:35

首先将链接图像的 href 更改为 YouTube 网址，确保“autoplay=1”喜欢此链接（不是嵌入网址）。然后删除隐藏的

并按照 FancyBox 上的提示 4“提示和; 技巧”页面相当简单：

$("#tip4").click(function() {
    $.fancybox({
            'padding'       : 0,
            'autoScale'     : false,
            'transitionIn'  : 'none',
            'transitionOut' : 'none',
            'title'         : this.title,
            'width'     : 680,
            'height'        : 495,
            'href'          : this.href.replace(new RegExp("watch\\?v=", "i"), 'v/'),
            'type'          : 'swf',
            'swf'           : {
                 'wmode'        : 'transparent',
                'allowfullscreen'   : 'true'
            }
        });

    return false;
});

简单示例

这样做，即使 JS 被禁用，人们仍然可以观看视频。

First change the href of your linked image to your YouTube URL making sure "autoplay=1" like this link (NOT the embed URL). Then get rid of your hidden <div> and follow tip 4 on the FancyBox "Tips & Tricks" page which is fairly straight forward:

$("#tip4").click(function() {
    $.fancybox({
            'padding'       : 0,
            'autoScale'     : false,
            'transitionIn'  : 'none',
            'transitionOut' : 'none',
            'title'         : this.title,
            'width'     : 680,
            'height'        : 495,
            'href'          : this.href.replace(new RegExp("watch\\?v=", "i"), 'v/'),
            'type'          : 'swf',
            'swf'           : {
                 'wmode'        : 'transparent',
                'allowfullscreen'   : 'true'
            }
        });

    return false;
});