Learn how to set the stream dimensions on Brella
The stream element does not have a fixed size or ratio. It is responsive in nature. The width and height are calculated based on the viewport size:
🔍 An iFrame is an inline frame used inside a webpage to load another HTML document inside it.
- iFrame width = 100 Viewport width - 200px (event side navigation) - 400px (if sidebar integrations are in place) - 64px (margins) -15px (browser scrollbar)
- iFrame height = 100 Viewport height - 184px
How does it look in practice?
For example: if the screen size is 1920x1080, in full screen
the viewport height will be 1001px (79px are used by Google Chrome for its navigation bar and other stuff, this might be a little different for you).
The viewport width will be 1920px (most of the full-screen browsers stretch across the screen evenly, of course, there will be some exceptions.
iFrame width = 1920px - 200px - 400px - 64px - 15px = 1241px
iFrame height - 1001px - 184px = 817px
⭐ Tip! To check your viewport size, click here:
⚡ Note! This is just one instance; the frame width and height will change for a person with a device resolution of 1366x768 or if she/he has 2k or 4k monitors too.
Last updated - July 2022.
Written by Natasha Santiago.
If you didn't find an answer to your questions, please get in touch with the Support Team here.