Request for assistance in handling my embedding handling

[PalmettoBling]

Good day,

I have a site (NodeJS/Express) which is embedding streams for a team. I have the main “team” stream displayed, and would like to display the streams of members not on the mainstage stream ONLY if they are online.

Now, I have this working by just hiding the streams when they are not online via Event Listener, BUT my issue comes in that it is maintaining the element spacing when it’s being hidden, so I might have some streams lower down the page and not highlighted at the top when they are on, because offline streams are still utilizing the space on the page.

So I was hoping I could ask y’all for help in the best way to handle this? Flexbox? Moving elements on the event listener trigger? I’m bad at the front end, so I could really use your assistance in what might be the best way for me to solve this.

Thank you!

[PalmettoBling]

So I have come to a solution that works. Using bootstrap, I use the “visually hidden” class which is doing a better job than the “d-none” class, along with a few different Flex classes to display nicer. Still have to test it out with multiple team members going live at different times to see how well it does, but I hope it’s ok.

I would still love to hear if anyone has any feedback on what they think is a good way to handle this.