点击后如何全屏播放视频？答案

【问题标题】：How to play video in full screen when clicked?点击后如何全屏播放视频？
【发布时间】：2018-01-27 06:14:47
【问题描述】：

我正在将来自 Youtube 和 Vimeo 的视频嵌入到带有标签的网站上。它们显示在网格库中。我希望视频被放大，从屏幕中心播放并只关注它们，直到用户点击视频区域。作为替代方案，您如何让它在点击时全屏播放？

【问题讨论】：

【解决方案1】：

it maybe help you:

http://robnyman.github.io/fullscreen/

just you need replace **button id** with your **video tag id** in script

Demo

【讨论】：

【解决方案2】：

你可以用 youtube api 做到这一点，看看这里

https://jsfiddle.net/ge3nqzxo/

<div id="video-container" class="embed-responsive embed-responsive-16by9">
    <div id="fullscreen-button">
        <img src="https://cdn0.iconfinder.com/data/icons/video-editing/100/8-512.png" style="wiudth:32px;height:32px;" title="Fullscreen" />
    </div>
    <div id="player-container">

    </div>
    <script>
        // 2. This code loads the IFrame Player API code asynchronously.
        var tag = document.createElement('script');

        tag.src = "https://www.youtube.com/iframe_api";
        var firstScriptTag = document.getElementsByTagName('script')[0];
        firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

        // 3. This function creates an <iframe> (and YouTube player)
        //    after the API code downloads.
        //rel=0&amp;controls=0&amp;showinfo=0&amp;version=3&amp;enablejsapi=1
        function onYouTubeIframeAPIReady() {
            player = new YT.Player('player-container', {
                playerVars: { 'rel': 0, 'controls': 0, 'showinfo': 0},
                videoId: 'EgUMLjp3H4E'
            });
        }

        function stopVideo() {
            player.stopVideo();
        }
    </script>
    <div id="trailer-wrapper">
        <div>
            <a>Click to view</a>
        </div>
    </div>
</div>

并添加此 javascript 以创建事件：

<script type="text/javascript">
        var player;
        $(document).ready(function () {
            $("#trailer-wrapper").click(function() {
                $(this).hide();
                player.playVideo();
                //$('#youtube-container').trigger( "click" );
            });
            $("#fullscreen-button").click(function(){
                var el = document.getElementById("player-container");
                if (el.requestFullScreen) {
                    el.requestFullScreen();
                } else if (el.mozRequestFullScreen) {
                    el.mozRequestFullScreen();
                } else if (el.webkitRequestFullScreen) {
                    el.webkitRequestFullScreen();
                }
                $("#trailer-wrapper").hide();
            });
        });
    </script>

【讨论】：