Embedding live stream content to Brella is very easy thanks to the iframe technology we count on.
The stream element does not have a fixed size or ratio. It is responsive in nature., and the width and height are calculated like this:
🔍 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?
Imagine the screen size is 1920x1080. If you open the browser 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 browser stretch across the screen evenly, of course, there will be some exceptions. So,
iFrame width = 1920px - 200px - 400px - 64px - 15px = 1241px
iFrame height - 1001px - 184px = 817px
⭐ Tip! If you want to check your viewport size, check this:
⚡ 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.