Question: I'd like to ask a unique innovative question regarding on a custom video player. What I have right now is a custom video player that has a play and when hit pause button the button will pause, but what is missing is I want to view full screen when I click the play button, and the final output should look like the YouTube Video full screen mode. 

Custom Video Player:

[![My Custom Video Player](https://i.stack.imgur.com/DVL8W.png)](https://i.stack.imgur.com/DVL8W.png)

See the difference here at YouTube Video Player when in full screen mode.

[![YouTube full screen video player](https://i.stack.imgur.com/kYuET.jpg)](https://i.stack.imgur.com/kYuET.jpg)

Custom video player code:

```html
<!DOCTYPE html>
    <html>
    <head>
        <style type="text/css">
            div#video_player_box{ width:100%; background:#000; }
            div#video_controls_bar{ background: #333; padding:10px; }
        </style>

        <script>
            function playPause(btn, vid){
                var vid = document.getElementById(vid);
                if (vid.paused) {
                    vid.play();
                    btn.innerHTML = "Pause";
                }else{
                    vid.pause();
                    btn.innerHTML = "Play";
                }
            }
        </script>
    </head>
    <body>
        <div id="video_player_box">
            <video id="my_video" controls="controls" width="100%" height="320">
                <source src="videoplayback.mp4">
            </video>

            <div id="video_controls_bar">
                <button id="playpausebtn" onClick="playPause(this,'my_video')">Pause</button>
            </div>
        </div>
    </body>
    </html>

```

Answer: 
Try updating your control bar to include the request for full screen on the div: 

```
<div id="video_controls_bar">
    <button id="playpausebtn" onClick="playPause(this,'my_video')">Pause</button>
    <button id="fs" onclick="document.getElementById('video_player_box').requestFullscreen();">Full Screen</button>
</div>

```

As the parent div (`video_player_box`) is the element which has been sent full-screen that means you can now control the size of the player, the background etc as you would within a div on the page
**please try this code:**

```
<!DOCTYPE html>
<html>
    <head>
        <style type="text/css">
            body {margin:0;}
            div#video_player_box{ width:100%; background:#000; }
            div#video_controls_bar{ background: #333; padding:10px; }
        </style>

        <script>
            function playPause(btn, vid){
                var vid = document.getElementById(vid);
                if (vid.paused) {
                    vid.play();
                    btn.innerHTML = "Pause";
                }else{
                    vid.pause();
                    btn.innerHTML = "Play";
                }
            }
        </script>
    </head>
    <body>
        <div id="video_player_box">
            <video id="my_video" controls="controls" width="100%" height="100%">
                <source src="videoplayback.mp4">
            </video>

            <div id="video_controls_bar">
                <button id="playpausebtn" onClick="playPause(this,'my_video')">Pause</button>
            </div>
        </div>
    </body>
</html>

```