How to play video in full screen when clicked?

Question

I am embedding videos on a website from both Youtube and Vimeo with tags. They are displayed in a grid gallery. I would like for the videos to get enlarged, play from the center of the screen and have focus solely on them until the user clicks off the video area. As an alternative, how would you make it play full screen when clicked on?

Answer 1

you can do that with youtube api, take a look here

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>

and add this javascript to create events:

<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>

Answer 2

it maybe help you:

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

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

Demo