如何Fancybox弹出Youtube和Vimeo视频自动播放

Question

我正在尝试在弹出窗口中自动播放视频。当我单击视频 url 时，它会创建弹出窗口。但不会自动播放 Youtube 和 Vimeo 视频。点击视频需要播放视频 url.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width" />

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/ui/dist/fancybox.css" />
</head>

<body>
    <!-- Content -->
    <?php
    $YoutuveVideoId = "vy0h7unmC3Q";
    $VimeoVideoId = "569001867";
    ?>

    <a data-fancybox="gallery" data-type="video" data-fancybox href="https://www.youtube.com/watch?v=<?php echo $YoutuveVideoId ?>">
        YouTube video
    </a>
    <a data-fancybox="gallery" data-type="video" data-fancybox href="https://vimeo.com/<?php echo $VimeoVideoId ?>">
        Vimeo video - custom color
    </a>

    <script src="https://cdn.jsdelivr.net/npm/@fancyapps/ui/dist/fancybox.umd.js"></script>
    
</body>

</html>

Answer 1

Chrome 自动播放政策于 2018 年 4 月更改，此后无法保证自动播放会正常运行，请参阅 https://developers.google.com/web/updates/2017/09/autoplay-policy-changes

Answer 2

它对我有用，你可以试试

<?php
$YoutuveVideoId = "vy0h7unmC3Q";
$VimeoVideoId = "569001867";
?>

<a data-fancybox="gallery" onclick="videoAutoPlay();" data-type="video" data-fancybox
   href="https://www.youtube.com/watch?v=<?php echo $YoutuveVideoId ?>">
    YouTube video
</a>
<a data-fancybox="gallery" onclick="videoAutoPlay();" data-type="video" data-fancybox
   href="https://vimeo.com/<?php echo $VimeoVideoId ?>">
    Vimeo video - custom color
</a>




<script>
    function videoAutoPlay() {
        setTimeout(function () {
            var videoSource = $('.is-selected').find('.fancybox__iframe').attr('src');
            $('.is-selected').find('.fancybox__iframe').attr('src', videoSource + '&autoplay=1');
        }, 2000);
    }
  </script>

如何Fancybox弹出Youtube和Vimeo视频自动播放

How to Fancybox pop-up Youtube and Vimeo video auto play

video

fancybox