Streams: Stream Dimensions

Learn how to set the stream dimensions on Brella.

To be covered:

Intro
How to set the stream dimensions

Intro

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 to set the stream dimensions

For example: if the screen size is 1920x1080, in full screen, the viewport height will be 1001px (79px is 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:
https://whatismyviewport.com/

⚡ 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 2023.

Written by Rajinda Wijetunge.

If you didn't find an answer to your questions, please get in touch with the Support Team here.

👇