JWPlayer to fill entire screen regardless of screen resolution

Question

I am trying to achieve something like this using jwplayer:

http://demosthenes.info/samples/polina.html

Here's what I got so far:

As you can see, the video easily fills the entire screen but if you resize the screen. The video resizes as well. Hope somebody can help me on this one. Here's my code snipper btw:

    aspectratio: "1:1",
    width: "100%",
    stretching: "exactfit",
    autostart: true,
    repeat: true

I just learned that the latest version of jwplayer does not support a height value of 100%.

Thanks

emaxsaun emaxsaun · Accepted Answer · 2014-01-17T14:23:36

Here is a demo I put together that does this - http://www.pluginsbyethan.com/github/

The source code of the page is:

<!DOCTYPE html>
<html>
    <head>
    <style type="text/css">
        body {
            overflow-x: hidden; overflow-y: hidden; 
        }
    </style>
    <script>
    document.ontouchstart = function(e){ 
        e.preventDefault(); 
    }
    </script>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta content="yes" name="apple-mobile-web-app-capable" />
    <script type="text/javascript">
    if (navigator.userAgent.match(/iPhone/i) != null){
    document.write('<meta name="viewport" content="width=device-width;initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />');
    } else 
    if (navigator.userAgent.match(/iPad/i) != null){
    document.write('<meta name="viewport" content="width=device-width;initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />');
    } else {
    document.write('<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,target-densityDpi=310" />');
    }
    </script>
    <script type="text/javascript">
    function hideURLbar() {
        if (window.location.hash.indexOf('#') == -1) {
            window.scrollTo(0, 1);
        }
    }
    if (navigator.userAgent.indexOf('iPhone') != -1 || navigator.userAgent.indexOf('Android') != -1 || navigator.userAgent.indexOf('iPad') != -1) {
        addEventListener("load", function() {
                setTimeout(hideURLbar, 0);
        }, false);
    }
    </script>
    <title>Hi!</title>
    <link href="reset.css" rel="stylesheet" type="text/css" />
    <link href="video.css" rel="stylesheet" type="text/css" />
    <!-- html5shiv -->
        <!--[if lt IE 9]>
            <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script type="text/javascript" src="http://p.jwpcdn.com/6/7/jwplayer.js"></script>
    </head>
    <body>
        <div id="video_bck">
        <div id="video"></div>
        <script type="text/javascript">         
            $(document).ready(function($) { 
                var w_height = $(window).height();
                var w_width = $(window).width();
                if (navigator.userAgent.match(/iPad/i) != null || navigator.userAgent.match(/iPhone/i) != null || navigator.userAgent.match(/android/i) != null){
                    jwplayer("video").setup({
                        height: w_height,
                        width: w_width,
                        file: "cat.mp4",
                        stretching: "fill",
                        autostart: true,
                        repeat: "true",
                        skin: "six.xml",
                        events:{
                            onPause: function(event) {
                                jwplayer('video').play();
                            }
                        }
                    });
                } else {
                    jwplayer("video").setup({
                        height: w_height,
                        width: w_width,
                        file: "cat.mp4",
                        controls: "false",
                        stretching: "fill",
                        autostart: true,
                        repeat: "true",
                        events:{
                            onPause: function(event) {
                                jwplayer('video').play();
                            }
                        }
                    });
                }
                $(window).resize(function(e) {
                    var new_w_height = $(window).height();
                    var new_w_width = $(window).width();
                    jwplayer("video").resize(new_w_width, new_w_height);
                });
            });
        </script>
        </div>
        <div id="box">
            <br />
            <br />
            Hello GitHub! 
        </div>
    </body>
</html>

Hope it helps!

JWPlayer to fill entire screen regardless of screen resolution

1 Answers