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

Uncaught TypeError: Cannot read property 'css' of undefined

Hello, I am trying to put a self hosted player on my WordPress site. I have done this on another WordPress site with no issues. So I am not sure if this is just an issue with the theme I am using on this one or not. I have also putting on my website which is a non-wordpress site and worked without issues too. I am converting to a Wordpress site only because if it being more responsive to mobile layouts.

I have the files on the server and put the call to the jwplayer.js in the head. For some reason it wasn't seeing it so I had to use a plugin to insert code in the header. Didn't have to do this on another WP site I added this to. Worked fine in the header.php without a plugin. Now that the path to the jwplayer.js file is being seen in the header with the plugin as verified by viewing source. I created a jwplayer.php file and put the player contents in that and called it with a php snippet in WP with a php plugin. It is working because when I view source I can see the code is on the page and the container div that is wrapping the player shows up and the div "loading the player..." shows up but, the player doesn't show up. When I look in the console of my browser I see the error "Uncaught TypeError: Cannot read property 'css' of undefined" referring to line 7 of the jwplayer.js so I know the path is correct and the file is being loaded. I have tried the JW Player 7 plugin but, it didn't work for me and what I was needing. I am just needing to display one player for my live stream for this site and that is it. Others I know have had no issues added this on their WP sites with different themes. So not sure if this is a WP theme issue or something with JW Player.

At any cost does anyone have any suggestions as to why I am getting this error and how to resolve it?

Here is a link to the site for example and further troubleshooting so you can see the error in the console.

stream.mesquiteweather.net

-Thanks!

5 Community Answers

Up Down

Todd

JW Player Support Agent  
0 rated :

I put the following three items (and only these three items) on a test page and your player setup worked for me:

1) your self-hosted player URL
2) your HTML <div id='mwx'></div>
3) your jwplayer().setup()

which leads me to believe this error is caused by your theme. Can you make a similar test page on your side?

Up Down

Nick Copeland

User  
0 rated :

Thanks Todd,

During further troubleshooting you are correct. I figured it was an issue with my theme and I think I have confirmed that.

I did make a similar test page but, with a different theme and it worked fine. The player loaded. I have the servers spun down so it won't connect to the server which I am aware of but the player loads so I know it is working and it worked last night when I had them spun up.

http://blog.mesquiteweather.net/

Non on my non WP theme using the same setup that I am migrating away from, it works too.

http://www.mesquiteweather.net/wxmwx_live.php


It just appears on this new WP theme it will not load due to that error but, I am not sure what is causing that error to load which is preventing the CSS to load. I can get a player to load but, it takes up the entire page because it ignores the CSS within the jwplayer.js.

stream.mesquiteweather.net

I guess I should contact the theme developer or is there anything else I can try in the meantime? In conclusion I agree with you through my further research that it is an issue with the theme. Just not sure how to resolve that issue. I really don't need Wordpress so if I can't get this working I may just be a page straight out from the ground up since I only need I for this one page.

Open to any suggestions and thank you for your reply.

-Thanks



Up Down

Nick Copeland

User  
0 rated :

Ok I have this resolved. Here is the resolution in case anyone else comes across this problem using Wordpress which their theme uses MooTools. In my case the Gantry Framework plugin uses it. This works for JW7.4+

First download the MooTools v1.6 js file.

Then navigate to wp-content/plugins/gantry/js/ and replace the mootools.js file with the one you just downloaded above. This assumes you are using Gantry. If not navigate to the js file where the mootools.js resides and replace it for their theme or framework being used.

That is it. You should now be able to run the self hosted player with no issues.

Up Down

Nick Copeland

User  
0 rated :

Forgot to add.

You can download the MooTools v1.6 js file from the link below.

http://mootools.net/core

Up Down

Todd

JW Player Support Agent  
0 rated :

Thanks for the additional details and links. I know our player has had conflicts with MooTools in the past, but I am glad to hear that MooTools v1.6 works.

This question has received the maximum number of answers.