JW Player for Flash & HTML5 Video
[Plugin: JW Player Plugin for WordPress] Centering and other effects through CSS (6 posts)

  1. Sandro Bilbeisi
    Posted 4 years ago #

    Centering and other effects through CSS
    JW Player Plugin for WordPress

    Currently the player won't center or accept CSS styling because the embedding script strips away the DIV and rewrites it.

    Getting the player to center on the parent DIV in a configurable per-shortcode manner would require a significant number of changes that are best left to the LongTail development team.

    So here is a quick hack to enable centering globally for all players and any shortcode:

    After the plugin is activated and the update sequence is completed, a jwplayer.js will be created at:


    this is a minified javascript, so edit with care...
    we will inject the code
    margin:"0 auto",

    at offset 40417 of jwplayer.js , so



    a.utils.css(x,{margin:"0 auto",position:"relative",width:m,height:v})

    live demo with additional effects (WebKit shadows)

    *later I'll add a 'reflection' effect and an Ambilight effect (requires additional ActionScript and CanvasJS hooks)

    Sandro Bilbeisi

  2. JW Player
    Plugin Author

    Posted 4 years ago #

    Hi Sandro,

    It should be possible to place a div around the shortcode when editing your post in HTML mode. This should give you a div to style after the embed has been done.

    Although I understand that you wouldn't want to add this in every time. So we'll look into adding an option in a future update.


  3. jjwalker
    Posted 4 years ago #

    Thank you Sandro for the hack, it works very nicely. I would prefer a cleaner LongTail solution that will allow css options to be specified in the "manage players" section. That would allow people comfortable with the visual editor in wordpress to easily use a shortcode and get proper formatting.

  4. JW Player
    Plugin Author

    Posted 4 years ago #

    Yeah, we're looking into this. I think the primary issue is the position: relative on the wrapper div generated by the player itself. This style is currently necessary to support the JavaScript plugin model. We're investigating a better solution.


  5. Vcize
    Posted 3 years ago #

    I take it this never happened? I just downloaded the player and have been pulling my hair out while trying to center the images.

  6. JW Player
    Plugin Author

    Posted 3 years ago #

    Yes, this change hasn't occurred. I've certainly mentioned it to the player team.

    However, the jwplayer div now receives the custom player name as a css class which helps somewhat in styling the player.


Topic Closed

This topic has been closed to new replies.

About this Plugin

  • JW Player for Flash & HTML5 Video
  • Frequently Asked Questions
  • Support Threads
  • Reviews

About this Topic