viewport resize event for flash player

javascript, jquery

Solution

Just bind to the `window` object on the `resize` and `orientationChange` events and use the `JW Player` `resize` method after getting the new width and height.

Something like this.

$(window).on('resize orientationChange', function(event) {
    var width = $(window).width();
    var height = $(window).height();
    jwplayer('player').resize(width, height);
});

Problem

I am new to all of this and can't figure out how to resize the flash player I use for my home media server when the window is resized or orientation changes. I am basing the player size on the size of the viewport. I have searched and tried various versions but they don't work which is most likely due to my lack of knowledge. Most of the code below was already done, I have commented what I added here for reference. Link to a sample viewport.js (added by me) ``` var width = $(window).width(); var height = $(window).height(); ``` html ``` <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> <title>Gizmo play_flash</title> <meta name="keywords" content="" /> <meta name="description" content="" /> <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" /> <script type="text/javascript" src="scripts/jwplayer.js"></script> <script type="text/javascript" src="jquery/jquery.js"></script> <script type="text/javascript" src="scripts/viewport.js"></script> <noscript><meta http-equiv="refresh" content="2; URL=noscript.html"></noscript> </head> <body style="margin: 0; padding: 0; background-color: #000000"> <div id="outer"> <div class="player_wrapper" style="width: 100%; height: 100%; margin:0px auto;"> <div id="player"> Loading the video player ... </div> </div> <script type="text/javascript"> jwplayer('player').setup({ 'flashplayer': 'scripts/player.swf', 'file': '[File.FlashLink]', 'autostart': 'true', 'duration': '[File.Duration]', 'provider': 'scripts/jrmediaprovider.swf', 'skin': 'scripts/glow.zip', <!--begin mod--> 'width': width - 5, 'height': height - 5 <!--endmod--> }); jwplayer('player').onComplete( function(event) { try { window.Gizmo.onComplete(); } catch (err) { } } ); </script> </div> </body> </html> ```

Original source