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

Question

我正在为我的网站中的视频嵌入YouTube视频播放器，我希望播放器与IMDB网站播放器具有相同的效果（http://www.imdb.com/）

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

Propfull

但我不能做的是在IMDB网站上如何弹出视频以及背景变暗。

我的完整代码：

private int value;

public int value
{
    get
    {
        return value;
    }
    set
    {
        this.value = value;
    }
}

Answer 1

通过查看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/

希望这会有所帮助，欢呼。