viewport resize event for flash player

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',
            'duratio