Title: Customize Player CSS?
Last modified: August 12, 2021

---

# Customize Player CSS?

 *  Resolved [docmonster](https://wordpress.org/support/users/docmonster/)
 * (@docmonster)
 * [4 years, 10 months ago](https://wordpress.org/support/topic/customize-player-css/)
 * I would love to be able to style the HTML5 Episode player with CSS but the plugin
   loads the CSS and JS at the end of the document. It would be *amazing* if you
   could load the CSS in the HEAD of the document before the child theme CSS is 
   enqueued in WordPress.
 * Can you make this happen? It would save me a ton of effort and would help other
   theme developers immensely.
 * thx

Viewing 5 replies - 1 through 5 (of 5 total)

 *  Plugin Author [Serhiy Zakharchenko](https://wordpress.org/support/users/zahardoc/)
 * (@zahardoc)
 * [4 years, 9 months ago](https://wordpress.org/support/topic/customize-player-css/#post-14787271)
 * Hi!
    Positioning of the CSS file is absolutely not a problem. Just use more specific
   rules in your own CSS. For example, if the plugin CSS has rule “.class1 .class2{}”,
   you can specify “.class1 div.class2 {}”, and it will be used no matter where 
   the plugin CSS file is placed. Here is a good article on how browsers measure
   specificity: [https://www.smashingmagazine.com/2007/07/css-specificity-things-you-should-know/#how-to-measure-specificity](https://www.smashingmagazine.com/2007/07/css-specificity-things-you-should-know/#how-to-measure-specificity)
   And, BTW, we put CSS file to the footer in purpose – this way it doesn’t block
   rendering the HTML, so this way your site works faster.
 * Best wishes,
    Sergey.
 *  Thread Starter [docmonster](https://wordpress.org/support/users/docmonster/)
 * (@docmonster)
 * [4 years, 9 months ago](https://wordpress.org/support/topic/customize-player-css/#post-14791837)
 * Sergey, thank you for the note. Your suggestion about specificity worked.
 * I do think it might be better to enqueue CSS in the header, though. WordPress
   typically sets up their enqueue system so that CSS loads in/near the head while
   JS can be enqueued in the footer at the end of the document.
 * The additional CSS from the plugin would have little effect on speed, typically,
   and your plugin would be more developer-friendly and allow for developers to 
   customize CSS loading in functions.php.
 * For instance, if you inspect [https://css-tricks.com/](https://css-tricks.com/)
   you’ll see that all CSS loads up top and JS scripts are placed either at the 
   top or bottom depending on rendering needs.
 * Wordpress documentation details the way CSS is enqueued but they only allow JS
   to use the parameter $in_footer by design.
    [https://developer.wordpress.org/themes/basics/including-css-javascript/](https://developer.wordpress.org/themes/basics/including-css-javascript/)
 *  Plugin Author [Serhiy Zakharchenko](https://wordpress.org/support/users/zahardoc/)
 * (@zahardoc)
 * [4 years, 9 months ago](https://wordpress.org/support/topic/customize-player-css/#post-14805307)
 * Hi [@docmonster](https://wordpress.org/support/users/docmonster/)!
    I’ve made
   an issue for it, so I believe this change will appear in the next releases. Thanks
   for the suggestion!
 *  Thread Starter [docmonster](https://wordpress.org/support/users/docmonster/)
 * (@docmonster)
 * [4 years, 9 months ago](https://wordpress.org/support/topic/customize-player-css/#post-14807657)
 * Wonderful, thank you!
 *  Plugin Author [Serhiy Zakharchenko](https://wordpress.org/support/users/zahardoc/)
 * (@zahardoc)
 * [4 years, 9 months ago](https://wordpress.org/support/topic/customize-player-css/#post-14843391)
 * Hi [@docmonster](https://wordpress.org/support/users/docmonster/)!
    I just checked
   the code which adds the player styles and realized that moving style to the header
   is not so easy. The problem is that we load player style only on the pages which
   have the player. And it means that we add the styles after the player is rendered,
   and it happens after the header is generated. But if you still want to load the
   player styles in the header, here is the code which you can put in your functions.
   php:
 *     ```
       add_action( 'init', function(){
       	if ( wp_style_is( 'ssp-castos-player', 'registered' ) && ! wp_style_is( 'ssp-castos-player', 'enqueued' ) ) {
       		wp_enqueue_style( 'ssp-castos-player' );
       	}
       } );
       ```
   
 * It will do the trick. But please be aware that in this case, player styles will
   be loaded on every page.
 * Cheers,
    Sergey.

Viewing 5 replies - 1 through 5 (of 5 total)

The topic ‘Customize Player CSS?’ is closed to new replies.

 * ![](https://ps.w.org/seriously-simple-podcasting/assets/icon-256x256.png?rev=
   970355)
 * [Seriously Simple Podcasting](https://wordpress.org/plugins/seriously-simple-podcasting/)
 * [Support Threads](https://wordpress.org/support/plugin/seriously-simple-podcasting/)
 * [Active Topics](https://wordpress.org/support/plugin/seriously-simple-podcasting/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/seriously-simple-podcasting/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/seriously-simple-podcasting/reviews/)

## Tags

 * [css](https://wordpress.org/support/topic-tag/css/)
 * [htm](https://wordpress.org/support/topic-tag/htm/)
 * [styling](https://wordpress.org/support/topic-tag/styling/)

 * 5 replies
 * 2 participants
 * Last reply from: [Serhiy Zakharchenko](https://wordpress.org/support/users/zahardoc/)
 * Last activity: [4 years, 9 months ago](https://wordpress.org/support/topic/customize-player-css/#post-14843391)
 * Status: resolved