Question

Today I was setting up JWPlayer , and I noticed a bug in IE6 and 7 only – the videos wouldn’t display on the page when the <video> tags were wrapped in a <p> tag. The videos display fine as long as they’re not enclosed in a <p>. When they’re wrapped in <p> tags they’re just a blank white block.

The client likes to wrap their videos in a p tag for spacing, so I need to either figure out a way around it, or find an explanation of why this can’t be done. Any ideas?

To my knowledge, there isn’t anything in the CSS that could possibly cause this, though I plan to comb through it and check tomorrow.

Code here (there are multiple players on any given page):

    <p>
      <video id="video1" class="JWVideo" width="276" height="206" style="background:transparent !important;" src="/ext/resources/video/index/Video-1.mp4"></video>
    </p>
    <script>
      $('.JWVideo').each(function(){
        var source = $(this).attr("src");
                    jwplayer(this.id).setup({
                      stretching: "fill",
                      flashplayer: "http://player.longtailvideo.com/player.swf",
                      controlbar: "false",
                      levels: [
                        {file: source}
                      ]
                    });
                });
    </script>

Answer 1

I fixed the problem. Changing the video code to use a ‘div’ with a ‘data’ parameter for the source seems to get rid of the issue.