css - HTML page with embedded JWPlayers not working any more -
edit: problem solved. fitvids code causing jwp not display. help.
i've been staring @ code long , can't figure out why it's not working after made couple of small mods. can 1 of clever folk check , let me know i've done wrong?
the page supposed have 3 embedded jwplayer in random video. css file using should 1 desktop screens, have 1 there iphone.
http://www.billarga.com/newsite/
the code below shows integration of 1 of 3 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 , (max-device-width: 480px)" href="http://www.billarga.com/newsite/css/iphone.css"> <link rel="stylesheet" media="all , (min-device-width: 481px) , (max-device-width: 1024px) , (orientation:portrait)" href="http://www.billarga.com/newsite/css/ipad-portrait.css"> <link rel="stylesheet" media="all , (min-device-width: 481px) , (max-device-width: 1024px) , (orientation:landscape)" href="http://www.billarga.com/newsite/css/ipad-landscape.css"> <link rel="stylesheet" media="all , (min-device-width: 1025px)" href="http://www.billarga.com/newsite/css/ipad-landscape.css"> <link rel="stylesheet" media="all , (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; } { 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; }
you might try putting jwplayer inside jquery's document ready callback, so:
<script> $(document).ready(function(){ $("#page-wrapper").fitvids(); 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>
Comments
Post a Comment