Question

我正在使用标签在Youtube和Vimeo的网站上嵌入视频。它们显示在网格库中。我希望视频能够放大，从屏幕中心播放并专注于它们，直到用户点击视频区域。作为替代方案，如何在点击时全屏播放？

Answer 1

it maybe help you:

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

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

Demo

Answer 2

单击更改<video/>元素的类将起到作用。以下课程将使视频全屏显示。

.fullscreen{ 
    width: 100%;
    height: 100%;
    max-height: 100%;
}

PS：如需进一步阅读，请参阅link。

Answer 3

你可以用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>

单击时如何全屏播放视频？

3 个答案: