Width Detection

We have developed our own social sharing plugin with the javascript API. We want to change how it functions based on the size of the player using CSS. While it is easy to make breakpoints for the size of the page using media queries, that doesn’t really apply to a player since the player can be smaller than the page size. Is there an easy way to detect how wide the player is so we can change some styling?

Hi,
The player always fills the DIV it was rendered in (unless using a playlist to the left or right of the player). So a basic jQuery width() should give you the right answer. You can check the width of the target DIV itself (if you know it within your plugin) or the Player’s iFrame which can be selected in jQuery by selecting its class name: $(". mwEmbedKalturaIframe").width()

Thanks! I thought at some point I had read that kaltura was basically doing that - setting a css class based on its width. I should be able to do that with jQuery though - I’m not even sure why I didn’t think of that method. Too blinded by the fact that I swear I read that it was available in the player already.

No problem. You can review all our player’s API here.
Furthermore, I’m not sure what your social share requirements are, but starting version 2.28 we’ve introduced an improved “Share & Embed” plugin allowing sharing to many networks, time offset, embed options and the ability to add your own social networks:
http://kgit.html5video.org/tags/v2.28/modules/KalturaSupport/components/share/Share.html

Hope that helps,
Amir

Haha, it does help…that’s pretty much what I built, but that’s ok.