如何在前台弹出YouTube视频播放器

How to pop up the YouTube Video player on the foreground

本文关键字：YouTube 视频 播放器 前台      更新时间：2023-09-26

我的网站中嵌入了一个用于视频的YouTube视频播放器，我希望该播放器具有与IMDB网站播放器相同的效果(http://www.imdb.com/)

我理解并完成了一部分，即使用以下代码调暗背景：

 var done = false;
        function onPlayerStateChange(event) {
            if (event.data == YT.PlayerState.PLAYING && !done) {
                var element = document.getElementById("dim")
                element.style.backgroundColor =  'rgba(0, 0, 0, 0.6)';
                        done = true;
            }
        }

但我不能做的是，在IMDB网站上，视频是如何随着背景变暗而弹出的。

我的完整代码：

<div id="dim>
<div id="player"></div>
    <script>
        var tag = document.createElement('script');
        tag.src = "https://www.youtube.com/iframe_api";
        var firstScriptTag = document.getElementsByTagName('script')[0];
        firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
        var player;
        function onYouTubeIframeAPIReady() {
            player = new YT.Player('player', {
                height: '390',
                width: '640',
                videoId: 'XGSy3_Czz8k',
                events: {
                    'onStateChange': onPlayerStateChange
                }
            });
        }
        var done = false;
        function onPlayerStateChange(event) {
            if (event.data == YT.PlayerState.PLAYING && !done) {
                var element = document.getElementById("dim")
                element.style.backgroundColor =  'rgba(0, 0, 0, 0.6)';
                        done = true;
            }
        }
        function stopVideo() {
            player.stopVideo();
        }
    </script>
</div>

通过查看IMDB的示例，似乎有一个与整个网站高度相同的隐藏容器，在该容器中，他们会弹出视频播放器。

我用GSAP制作弹出窗口的动画：

$('.video-btn').on('click',function(){
    $('.video-overlay').addClass('is-on');
    TweenMax.from('#vid',.6,{scale:0});
});

GSAP的主要原因是#vid容器的任何子对象都会随着父对象一起缩放，所以你可以拥有你想要的控件、缩略图或任何东西，它也会随之缩放。我只建议在弹出窗口完成动画后动态添加你的视频。如果缩放/设置视频动画，动画可能会断断续续。

以下是快速演示：https://jsfiddle.net/keinchy/4Lk7wj6o/1/

希望这能有所帮助，干杯。

相关文章：