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

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?

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'.

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

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.

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.

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.