UPDATE: ISSUE RESOLVED. The FitVids code was causing the JWPlayer to not display properly. Appreciate all the assistance!
I've been looking at my code for too long and still can't pinpoint the problem after making a few tweaks. Can one of you smart individuals take a look and point out where I went wrong?
The page is supposed to contain three embedded JWPlayers with random videos. It should use the CSS file designed for desktop screens, but there's also one for iPhones included.
The code snippet below showcases the integration of one of the three players.
HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta content="text/html; charset=ISO-8859-1"
http-equiv="Content-Type">
<title>New Site</title>
<script type="text/javascript" src="http://www.billarga.com/newsite/player/jwplayer.js"></script>
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
<link rel="stylesheet" media="all and (max-device-width: 480px)" href="http://www.billarga.com/newsite/css/iphone.css">
<link rel="stylesheet" media="all and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait)" href="http://www.billarga.com/newsite/css/ipad-portrait.css">
<link rel="stylesheet" media="all and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape)" href="http://www.billarga.com/newsite/css/ipad-landscape.css">
<link rel="stylesheet" media="all and (min-device-width: 1025px)" href="http://www.billarga.com/newsite/css/ipad-landscape.css">
<link rel="stylesheet" media="all and (min-width: 1824px)" href="http://www.billarga.com/newsite/css/screen.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script src="http://www.billarga.com/newsite/js/jquery.fitvids.js"></script>
<script>
$(document).ready(function(){
$("#page-wrapper").fitVids();
});
</script>
</head>
<body>
<div id="page-wrapper">
<div id="video-wrapper">
<div id="video">Video 1</div>
<script type="text/javascript">
jwplayer('video').setup({
'flashplayer': 'http://www.billarga.com/newsite/player/player.swf',
'file': 'http://www.billarga.com/newsite/content/0000001/1.mp4',
'controlbar': 'bottom',
'width': '480',
'height': '360'
});
</script>
</div>
</div>
</body>
</html>
CSS
body {
margin: 0;
padding: 0;
color: #000000;
font-size: medium;
}
a { color: blue; text-decoration: none; }
a:visited { color: blue; text-decoration: none; }
a:hover { color: blue; text-decoration: underline; }
h1 { font-size: x-large; text-align: center; }
#page-wrapper {
margin: 0 auto;
width: 100%;
height: 100%;
}
#video-wrapper {
width: 100%;
height: 360px;
}
#video {
float: left;
}