Skip to main content
User Community Portal
Solved

Additional style tag for video dimenions is not getting removed on player disposal

  • February 27, 2025
  • 7 replies
  • 54 views

Forum|alt.badge.img

Hi, we are using brightcove in a nextjs app and we are facing the issue that for each video that gets rendered via player-loader it created an additional style tag for the playerId for the dimensions which adds up overtime, as the page is not reloaded on page navigation.

<style class=”bc-player-aLEWmlpn9L_default-index-0-video-dimensions”>

.bc-player-aLEWmlpn9L_default-index-0{width:640px;height:360px;}.bc-player-aLEWmlpn9L_default-index-0.vjs-fluid:not(.vjs-audio-only-mode){padding-top:56.25%;}

<style class=”bc-player-aLEWmlpn9L_default-index-1-video-dimensions”>

...

<style class=”bc-player-aLEWmlpn9L_default-index-2-video-dimensions”>

etc.

 

Is this a case for the support or for the github repo? We don’T want to do the “clean up” task outself, it’s fine that the main css gets loaded only once and stays in the page but this entries really add up if you navigate in video galleries.

Best answer by Andy Hartono

Hi Benjamin,

Which component are you currently using? If you’re using @brightcove/react-player-loader, please note that it is an open-source tool and is not officially supported by Brightcove. You can find more details here:
🔗 React Player Loader Documentation


For an officially supported solution, Brightcove recommends using their Web SDK:
🔗 Brightcove Web SDK (it may not be as straightforward as the React Player Loader)


Regarding the issue you’re experiencing with accumulating <style> tags, I’m also using this component but haven’t encountered the same problem. 

View original
Did this topic help you find an answer to your question?

7 replies

Andy Hartono
Forum|alt.badge.img+2
  • Brainy
  • 53 replies
  • Answer
  • March 2, 2025

Hi Benjamin,

Which component are you currently using? If you’re using @brightcove/react-player-loader, please note that it is an open-source tool and is not officially supported by Brightcove. You can find more details here:
🔗 React Player Loader Documentation


For an officially supported solution, Brightcove recommends using their Web SDK:
🔗 Brightcove Web SDK (it may not be as straightforward as the React Player Loader)


Regarding the issue you’re experiencing with accumulating <style> tags, I’m also using this component but haven’t encountered the same problem. 


Forum|alt.badge.img

HI ​@Andy Hartono , thanks for the feedback. Yes, we are using @brightcove/react-player-loader currently, and yes I know it also lacks some updates, We have also issues in strict mode and other issues which are opend since “years” in the repo. I guess we will create our own custom component 

Are you setting any kind of responsive mode?

 


Andy Hartono
Forum|alt.badge.img+2

Hi ​@Benjamin Kaiser ,

Yes, responsiveness is essential nowadays.

The document I shared earlier is for React Native. Here’s another official Brightcove package for React Web that you might find useful:
🔗 @brightcove/web-sdk

Alternatively, as you mentioned, you can create your own custom components, which will give you full control over the implementation. If you’re using TypeScript, don’t forget to declare video-js in your JSX, as you might encounter the error:

Property 'video-js' does not exist on type 'JSX.IntrinsicElements'.

 

 


Forum|alt.badge.img

Hi ​@Andy Hartono we want to leverage the players we can create in the Video Cloud. From my readings the Web-SDK is for finer control about basically everything but you start with the basics. I still need to have a deeper look and experiment a bit, but I think we will recreate the react-player-loader based on hooks by using https://player.support.brightcove.com/publish/brightcove-player-loader.html

 

 


Forum|alt.badge.img

Ok, I gave it a quick try. The latest version 1.1.0 of Web-SDK is not even working correctly, it throws an mapToSource is not a function error in the dist files. Downgrading to 1.0.3.solved that issue. But as mentioned it’s far more tedious as using the brightcove players directly.


Andy Hartono
Forum|alt.badge.img+2

From what I understand, your initial issue was related to duplicate CSS. As mentioned:

Each video rendered via player-loader creates an additional <style> tag for the playerId to handle the dimensions, which accumulates over time, especially as the page is not reloaded during navigation.

You also brought up responsiveness—which makes me wonder:

Is the CSS duplication happening due to screen size changes/updates (e.g., resizing or orientation changes triggering new styles)?
Or is it caused by re-rendering (e.g., new instances of the player being mounted without cleaning up old styles)?

Understanding this might help narrow down a better solution.

Nevertheless, have you also tried opening a ticket with Brightcove Support to see if they can assist with this issue? They might have insights or potential fixes for handling the duplicate CSS problem more effectively.


Forum|alt.badge.img

Hi, the style tag that is duplicated is just containing a small amount of css for aspect ratio. See example in the first entry of my first comment.

I just set up two pages with different videos and players and each time I go back and forth I get another style tag as the “index” counts up. For me it looks like the “dispose” function internally is not reducing the index variable they are adding for those style tags. If i remember correctly (but not 100% sure). It only happens if I use the responsive props from BC, and not from VideoJS. But I  need a format 21:9 which is not directly supported via video-js and the one from BC is calcluated . I didn’t dig to deep into it, and I didn’t opened a support ticket “yet” as I just discovered it while playing around a bit. But when we do implement it, I will raise one if we can’t figure it out where this is coming from.


Reply


Cookie policy

We use cookies to enhance and personalize your experience. If you accept you agree to our full cookie policy. Learn more about our cookies.

 
Cookie settings