Name is required.
Email address is required.
Invalid email address
Answer is required.
Exceeding max length of 5KB

Could not load configuration error in IE7/8 - Unable to get property 'cssRules'

Trying to play a video within a jquery dialog. It works fine in all browsers except IE 7 and 8.

When I try to play the video in IE7/8 I get:
"Error Loading Player: Could not load player configuration."

IE 7/8 also gives me this script error:
SCRIPT5007: Unable to get property 'cssRules' of undefined or null reference
jwplayer.html5.js, line 5 character 481

bc.. jwplayer("player").setup({
fallback: 'false',
abouttext: "Swell Video",
aboutlink: "/",
ga: { idstring: "title" },
sharing: {},
file: "/content/videos/Swell_Demo_3_31_14.mp4",
image: "/content/videos/Thumbnails/swell-guy.jpg",
title: "Play Swell Video",
height: 360,
width: 640
});



Site can be seen here (click box on bottom right of page to launch and play the video):
http://test.liveswell.com

Thanks,
Jon

7 Community Answers

Up Down

Ethan Feldman

JW Player Support Agent  
0 rated :

Can you see if the TM lin the abouttext is to blame?

Up Down

JW Player

User  
0 rated :

Did not solve the problem. I removed it and updated the site.

Up Down

Ethan Feldman

JW Player Support Agent  
0 rated :

You don’t need to link to – <script src="/Scripts/jwplayer-6.8/jwplayer/jwplayer.html5.js"></script>

Also maybe just making aboutlink a slash might be an issue?

Up Down

JW Player

User  
0 rated :

Still no luck. It might be helpful if I post the jquery snippet as well. Here is everything:

bc.. <a id="square-circle-how-it-works" href="javascript:void(0)">How it Works</a>

<div class="videoPlayer" style="display:none">
<div id="player">Loading Video Player...</div>
</div>

<script>
jwplayer.key = "xxxx";
jwplayer("player").setup({
fallback: 'false',
abouttext: "Swell Video",
ga: { idstring: "title" },
sharing: {},
file: "/content/videos/Swell_Demo_3_31_14.mp4",
image: "/content/videos/Thumbnails/swell-guy.jpg",
title: "Play Swell Video",
height: 360,
width: 640
});

$(document).ready(function () {
$("#square-circle-how-it-works").click(function (){
$(".videoPlayer").dialog({
resizable: false,
width: 640,
height: 425,
modal: true,
closeOnEscape: false,
open: function() {
window.jwplayer().play();
$(".ui-dialog-titlebar-close").hide();
$(".ui-dialog").addClass("videoPopup");
$(".videoPopup").append("<a class='textToImage closeButtonBlack' href='#'>close</a>");
$(".ui-dialog-titlebar").hide();
$('.closeButtonBlack').click(function () {
window.jwplayer().pause();
$('.videoPlayer').dialog('close');
return false;
});
}
});
});
</script>

Up Down

Ethan Feldman

JW Player Support Agent  
0 rated :

Can you try to put this on a blank html page to see if the issues still happen?

Up Down

JW Player

User  
0 rated :

Problem Solved. The jquery dialog had be setup outside of the .click function.

bc.. <a id="square-circle-how-it-works" href="javascript:void(0)">How it Works</a>

<div class="videoPlayer" style="display:none;">
<div id="player">Loading Video Player...</div>
</div>

$(".videoPlayer").dialog({
resizable: false,
width: 640,
height: 425,
modal: true,
closeOnEscape: false,
autoOpen: false,
open: function () {
window.jwplayer().play();
$(".ui-dialog-titlebar-close").hide();
$(".ui-dialog").addClass("videoPopup");
$(".videoPopup").append("<a class='textToImage closeButtonBlack' href='#'>close</a>");
$(".ui-dialog-titlebar").hide();
$('.closeButtonBlack').click(function () {
$('.videoPlayer').dialog('close');
return false;
});
},
close: function () { window.jwplayer().pause(); }
});

jwplayer("player").setup({
fallback: 'false',
abouttext: "Swell Video",
ga: { idstring: "title" },
sharing: {},
file: "/content/videos/Swell_Demo_3_31_14.mp4",
image: "/content/videos/Thumbnails/swell-guy.jpg",
title: "Play Swell Video",
height: 360,
width: 640
});

$("#square-circle-how-it-works").click(function (){
$('.videoPlayer').dialog('open');
});

Up Down

Ethan Feldman

JW Player Support Agent  
0 rated :

Glad you got it.

This question has received the maximum number of answers.