CODEWITHSUNDEEP
javascriptmobilehtml5-videoresponsive-designviewport
two7s_clash
two7s_clash

Reputation: 5827

Dynamic viewport for mobile devices to always contain video player of fixed dimensions

I have universal video wrapper that I'm trying to make responsive to mobile devices. What I would like to do is dynamically change the viewport so the video can always fit inside of it, in either orientation. I assumed this would be simple, but I'm pulling my hair out. Switching the landscape just

Basically, the height and width of the video is configured at the top of the page, and this information is passed to to the JW Player, which makes a flash or HTML5 video player accordingly. I'm also using this info, in combination with the client width and height to attempt to set the viewport so the video portion of the page can always fit neatly within, without zooming.

I have setup that pretty much does what I want on my Android Galaxy S II, but it still looks a mess on the iPhone. And I have to manually set a zoom ratio which I know isn't helping me find a universal solution.

Here's the gist of what I have so far:

http://bit.ly/O1afMJ

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width = device-width, height = device-height" id="mvp" />
<script>                    
            /************ Bunch of player config stuff I've omitted *****************/

                        // These are the width and height of your player. For type "audio", the height is ignored. Default is 480x360. 

            var width = 480;
            var height = 360;
</script>
<script type="text/javascript">

        // Detect whether device supports orientationchange event, otherwise fall back to
        // the resize event.
        var supportsOrientationChange = "onorientationchange" in window, orientationEvent = supportsOrientationChange ? "orientationchange" : "resize";

        window.addEventListener(orientationEvent, resizeView, false);

        // see if the height or width of the player is greater than the viewport, if so, resize it
        function resizeView() {

                if (document.documentElement.clientWidth < width) {
                        mvp.setAttribute('content', 'width=' + width, + ', height = device-height');
                }

                if (document.documentElement.clientHeight < height) {
                        mvp.setAttribute('content','height=' + height + ', initial-scale=0.6666, maximum-scale=0.6666'); // scale hacks to make this at least do what I want on my Droid, doesn't look nice on iPhone
                }
        };

</script>
</head>
<body>
<h2 id="title">title</h2>
<div id="blurb">blah blah blah</div>
<div role="main">
<div id="mediaspace">
  I'll be replaced by the JW Player
</div>
<script src="http://cdn.cengage.com/js/jwplayer/5.8/jwplayer.js" type="text/javascript">
</script>
<script src="player_mobile.js" type="text/javascript">
</script>
<script type="text/javascript">
        resizeView();
</script>
</body>
</html>

Maybe devicePixelRatio would be helpful? Unsure!

Upvotes: 1

Views: 1595

Answers (1)

user1010892
user1010892

Reputation: 1189

Rather than messing with the viewport, how about using http://fitvidsjs.com/? This will resize the video depending on the container.

Hope that helps

Upvotes: 1

Related Questions