Extract of Bootstrap 3 CSS crashing IE9

Question

The following page was constantly crashing for me in IE9 on Windows 7:

http://www.studyzone.tv/test1.html

After much testing around, it turns out the line-height line in the Bootstrap 3 CSS File was causing the crash...or at least conflicting with JWPlayer somehow, and between them, causing the crash!

body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.428571429;  /* THIS IS THE LINE THAT CUASES THE ERROR*/
  color: #333333;
  background-color: #ffffff;
}

I have duplicated the CSS file and commented the line out and it fixes the problem, as can be seen in this link:

http://www.studyzone.tv/test2.html

I suppose I have two questions:

1. Why is this line causing the crash? Have I really found the problem, or do I have a conflict somewhere else?
2. How can I fix the issue without commenting out the original CSS file which is obviously bad practice?

Answer 1

It most likely has to do with a clash in HTML5 mode in IE between our HTML5 player and Bootstrap.

You are setting primary to flash inside of the playlist block, so it is never taking effect.

The set up should be:

<script type="text/javascript">
    jwplayer("jwplayer").setup({
    playlist: [{
        image: "http://www.studyzone.tv/media/lesson002/lesson002-still.jpg",
        sources: [
            { file: "http://www.studyzone.tv/media/lesson002/lesson002-lq.mp4", label: "360p" },
            { file: "http://www.studyzone.tv/media/lesson002/lesson002-hq.mp4", label: "720p HD" }
        ],
        title: "Play video"
    }],
    width: "700",
    aspectratio: "16:9",
        primary: "flash"
    });
</script>

This should solve the issue and you won't have to comment anything out either.