Home/ Questions/Q 6685601
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-26T05:04:33+00:00

EDIT: PROBLEM SOLVED. It was the FitVids code causing the JWP to not display.

  • 0

EDIT: PROBLEM SOLVED. It was the FitVids code causing the JWP to not display. Thanks to all for your help.

I’ve been staring at my code too long and can’t figure out why it’s not working after I made a couple of small mods. Can one of you clever folk check it and let me know what I’ve done wrong?

The page is supposed to have three embedded JWPlayer in it with some random video. The CSS file it is using should be the one for desktop screens, but I also have one there for iphone.

http://www.billarga.com/newsite/

The code below shows 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;
    }
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You might try putting your jwplayer inside jQuery’s document ready callback, like 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>
    • 0