Size a JW video initial display for mobile device width

Start with the proper meta tag for mobile devices. This will attempt to size the body element to the screen size.

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

Using JWPlayer 6.0 script to embed the video, you have to give it a width and height for it to appear on the page. On the page that displays the player and I pass in the file name to pull into the player. So I want this to look appropriate on the device upon opening it. This is how I get and set the width. I use jQuery to get the window width.

<script type="text/javascript">
var win_props = {};
    win_props.width = $(window).width();

var mov_props = {};
mov_props.width = win_props.width - 20;
mov_props.height = (mov_props.width*.562);


jwplayer("vid").setup({
    file: 'http://path/to/file',
    image: 'http://path/to/image/file',
    height: mov_props.height,
    width: mov_props.width
});
</script>

On a 320 wide iPhone it should size into the width properly. If the phone is held horizontally when going to the page it should size correctly, too. Other wider devices will display well, too. Actually, even on a web browser the video will display on the page in the proper proportions. It checks the width of the browser and displays the player 20 pixels less than that width. The *.562 keeps the height in the proper proportion.

Example. Resize the window and reload to see it work.