Question / Help Can someone ELI5 browser source settings?

[Thebigcheese]

Pretty much what the title says. I've searched all over (Google, YouTube, here, Reddit, etc) and I can't figure out what the "proper" settings are. Specifically:

• What is the right setting for width/height? In the Streamlabs tutorials, it just says to paste in your URL, but they leave everything else alone. Should I change the size? Should I just scale it up or down later? I can't find anywhere that even mentions these settings and it just baffles me that no one has talked about it.
• What would be the reason to use custom CSS? CSS has some stuff in there by default, should I leave it alone or delete it? What would be accomplished by changing it?

 

[koala]

We cannot give an answer, because an answer depends completely on what you intend to show in the browser source, how you want it to look like, and how you intend to integrate it into your video.

General advice for settings you don't understand: don't change and keep the default.

If you have an issue, identify the setting that addresses the issue and change exactly that setting accordingly.
If you have an issue and don't know which setting addresses the issue, come here and ask.
If you don't have an issue, don't change any setting.

If you are the explorer type and want to know what a setting does, change the setting and observe what has changed in application behavior. If you don't observe any change, change the setting back to what it was before and note this setting as "dunno what this does, don't touch until I find out".

 

[Thebigcheese]

We cannot give an answer, because an answer depends completely on what you intend to show in the browser source, how you want it to look like, and how you intend to integrate it into your video.

General advice for settings you don't understand: don't change and keep the default.

If you have an issue, identify the setting that addresses the issue and change exactly that setting accordingly.
If you have an issue and don't know which setting addresses the issue, come here and ask.
If you don't have an issue, don't change any setting.

If you are the explorer type and want to know what a setting does, change the setting and observe what has changed in application behavior. If you don't observe any change, change the setting back to what it was before and note this setting as "dunno what this does, don't touch until I find out".

I'll try to elaborate, then:

• As mentioned above, in this particular case I am using Streamlabs, but am looking for general information on why the defaults are what they are and under what situations I would want to change them. I've tried to understand what they do, but after hours of Googling, it doesn't seem anyone knows, so I came here for answers. In the particular case of Streamlabs, since they don't have options to size any of the widgets, is the idea that they are expecting that you will leave it at the 800x600 default size? They provide no information on this, but I've noticed that changing the source width/height seems to affect the relative size of items in the widget.
• With CSS, I've seen mentioned somewhere that the default settings allow for background removal, but having deleted all the CSS in my own source, I still have transparency with my alert widget. So what are the defaults doing and why might I want to change them? What can be accomplished here in general?

 

[carlmmii]

A browser source is just a web page rendering. The size you specify for the browser source is the size of the "window" that you're using to render. i.e. if you set your width to 800px and height to 600px, that means you're going to end up with an 800x600 browser source layer, which acts like a browser window with 800 pixels of horizontal viewing space and 600 pixels of vertical viewing space.

Depending on how you want elements to display, this is where you would adjust your resolution. If you need to compress the page to be more vertical, then you can reduce the width. Need to expand everything out? Increase the size.

Importantly though, the browser source's width/height is independent of the actual width/height of the layer in your scene. You can resize it on the canvas (i.e. dragging around the red box), and that will just do a resize of the overall source -- the contents won't change, since you're not actually changing anything about the browser. Depending on what you're trying to capture, you can use this to your advantage.

Take an example of trying to capture twitch chat. You include the popout twitch page, and you set your browser size to 500x800 (relatively "normal" vertical-style). The problem is that this includes stuff that doesn't make sense to include in the scene -- a bunch of stuff up top, a chat box on the bottom, borders on the sides. This is when you can alt-drag the bounding box of the source to crop those out without affecting what's actually there in the browser source.... and then if you need to have more twitch chat visible, just increase the size of the browser source.


For the question of custom CSS, this is more for applying your own styles, and unless you've got a background in web design (or a very specific CSS stylesheet that you want to apply to your page), it's best to just ignore this. Just know that this is what you would use if you actually need to make styling changes to the look of the webpage itself, besides just size (i.e. change font/colors, add extra spacing to specific elements, etc). The default text there in the box actually does nothing -- it's just a template for easier jumping in of editing.

 

[Thebigcheese]

Awesome, thank you! That helps me understand. And explains why deleting the default didn't change anything. So I can probably leave it there for the future just in case.