# Design Parameters

They are separated in three groups: [general options](#general-options) (push and view), [source side](#source-side-options) (push) options and [viewer side](#viewer-side-options) (view) options.

## General options

You can add them to both, source ([`&push`](/advanced-settings/setup-parameters/push.md)) and viewer ([`&view`](/advanced-settings/mixer-scene-parameters/view.md) or [`&scene`](/advanced-settings/mixer-scene-parameters/scene.md)) sides.

<table><thead><tr><th width="251.57142857142856">Parameter</th><th>Explanation</th></tr></thead><tbody><tr><td><a href="/pages/-MZNYhxR_5-Ep_h_N74w"><code>&#x26;label</code></a></td><td>Sets a display name label</td></tr><tr><td><a href="/pages/-MZX1giUvL4TJts_BahZ"><code>&#x26;showlabels</code></a></td><td>Display labels as a video overlay</td></tr><tr><td><a href="/pages/-MZdusAoZaSzfwRbPWjH"><code>&#x26;fontsize</code></a></td><td>Let you set font-size of the closed captions and stream labels</td></tr><tr><td><a href="/pages/-MZX7oiFsDcg_A1Z-R2M"><code>&#x26;style</code></a></td><td>Lets you select how audio-only elements are displayed in OBS and for guests</td></tr><tr><td><a href="/pages/UmehaIO8eQ4CpOdydDO6"><code>&#x26;bgimage</code></a></td><td>Can be used to set the default image avatar, when using <a href="/pages/-MZX7oiFsDcg_A1Z-R2M"><code>&#x26;style=0</code></a> or <a href="/pages/-MZX7oiFsDcg_A1Z-R2M"><code>&#x26;style=6</code></a></td></tr><tr><td><a href="/pages/6sHWya2fqe6JgfjWyCbB"><code>&#x26;showall</code></a></td><td>Includes non-media-based push connections as video elements in a group room</td></tr><tr><td><a href="/pages/-MZN_8Vi5yo7zBDLWI-U"><code>&#x26;meterstyle</code></a></td><td>Optional audio meter style type</td></tr><tr><td><a href="/pages/-MZNVpUhSWW6qsvQZSb8"><code>&#x26;cleanoutput</code></a></td><td>Keeps the output as clean as possible from UI elements</td></tr><tr><td><a href="/pages/-MZNVXyX9L2dHedM9aDb"><code>&#x26;cleanish</code></a></td><td>Cleaner output; not as clean as <a href="/pages/-MZNVpUhSWW6qsvQZSb8"><code>&#x26;cleanoutput</code></a></td></tr><tr><td><a href="/pages/-MZNW5d8bRb7mzFAIouh"><code>&#x26;css</code></a></td><td>Loads a custom CSS file</td></tr><tr><td><a href="/pages/HtaenRWQ7yQ3hJKIe5CI"><code>&#x26;base64css</code></a></td><td>Lets you add css to the URL, but as a single string, so no external reference to a file is needed</td></tr><tr><td><a href="/pages/rn6x2Zug0oARNY7U6oQD"><code>&#x26;js</code></a></td><td>Lets you pass a third party hosted javascript file URL</td></tr><tr><td><a href="/pages/8TTkuVw3O1KRUSy0Y7b4"><code>&#x26;base64js</code></a></td><td>Lets a user add raw javascript to the URL to run on page load</td></tr><tr><td><a href="/pages/-MZOMNvQPrR_E5e5Zxxd"><code>&#x26;mirror</code></a></td><td>Inverts the video so it is the mirror reflection</td></tr><tr><td><a href="/pages/KKxKN7pF5pqYdT3yJyE1"><code>&#x26;nomirror</code></a>*</td><td>Disables the default mirror state of the video preview for a guest</td></tr><tr><td><a href="/pages/-MZNXXRU5WeDRWuoN6mB"><code>&#x26;flip</code></a></td><td>Inverts the video so it is upside down</td></tr><tr><td><a href="/pages/uvXdWOSj8ojhE7avv54e"><code>&#x26;rotatewindow</code></a></td><td>Will rotate the contents of the VDO.Ninja window</td></tr><tr><td><a href="/pages/9cz57gsDjoS4UT6rIXEj"><code>&#x26;structure</code></a></td><td>Will have the video holding div element be structured to the aspect ratio</td></tr><tr><td><a href="/pages/QMi6Cor7B2Ipg74HvdTo"><code>&#x26;color</code></a></td><td>You can specify the background color independent of the border color</td></tr><tr><td><a href="/pages/zX0ulmrN3e3dsU31LXtF"><code>&#x26;holdercolor</code></a></td><td>Sets the video holder background color behind or around video tiles</td></tr><tr><td><a href="/pages/dbyMzOd2RCv3874O5lKi"><code>&#x26;blur</code></a></td><td>Will try to add a blurred background to the video so it fits the structured video container</td></tr><tr><td><a href="/pages/x1Un3zhfJsDpEf8a16Xb"><code>&#x26;border</code></a></td><td>Adds a border around the videos</td></tr><tr><td><a href="/pages/yEn7bGBjckE9X1x4BBN6"><code>&#x26;bordercolor</code></a></td><td>Defines the color of <a href="/pages/x1Un3zhfJsDpEf8a16Xb"><code>&#x26;border</code></a></td></tr><tr><td><a href="/pages/-Mj8LHdCLMu1oVgo_2SQ"><code>&#x26;rounded</code></a></td><td>Rounds the edges of videos</td></tr><tr><td><a href="/pages/-Mb8a62n8D9lCcacBODY"><code>&#x26;margin</code></a></td><td>Adds a margin around the videos in pixel</td></tr><tr><td><a href="/pages/-Mj8Mw0gEkUkPlWmxRJw"><code>&#x26;darkmode</code></a></td><td>Darkens the website and interface</td></tr><tr><td><a href="/pages/oVoeucFogh9kxB9i9d81"><code>&#x26;lightmode</code></a></td><td>Forces to enable the lightmode / disable the darkmode</td></tr><tr><td><a href="/pages/vNOeAWRUpRlwMrHqfxry"><code>&#x26;background</code></a></td><td>Accepts a URL-encoded image URL to make as the app's default background</td></tr><tr><td><a href="/pages/-MZHfj9aSfYk2RJf_S4y"><code>&#x26;chroma</code></a></td><td>Sets the background for the website to a particular hex color</td></tr><tr><td><a href="/pages/-MZX7zciUBszTwZweqvR"><code>&#x26;transparent</code></a></td><td>Makes the background transparent</td></tr><tr><td><a href="/pages/-MZWyOkVtwDmqWUWoGun"><code>&#x26;nocursor</code></a></td><td>Hides the mouse cursor over videos at a CSS level</td></tr><tr><td><a href="/pages/igfwI1ASKTCOtvW2Uuth"><code>&#x26;favicon</code></a></td><td>Will change the browser's page favicon image</td></tr><tr><td><a href="/pages/rq259tilHGWi8pbi46iY"><code>&#x26;headertitle</code></a></td><td>Will change the browser's page title</td></tr><tr><td><a href="/pages/7Wg848KhhFGWluKpogTy"><code>&#x26;pipall</code></a>*</td><td>New floating picture in picture mode, so you can pop out the entire video mix as a pinned window overlay</td></tr><tr><td><a href="/pages/adNH85JdVOC2kJSM82Q2"><code>&#x26;pipme</code></a>*</td><td>Will cause your self-video preview window to pop out into its own picture in picture</td></tr><tr><td><a href="https://github.com/steveseguin/vdo.ninja/blob/gitbook/advanced-settings/design-parameters/and-alignright.md"><code>&#x26;alignright</code></a></td><td>Right-align certain default UI placements (e.g., screen-share dock)</td></tr><tr><td><a href="https://github.com/steveseguin/vdo.ninja/blob/gitbook/advanced-settings/design-parameters/and-menuoffset.md"><code>&#x26;menuoffset</code></a></td><td>Moves the on-page control buttons up or down by a pixel offset</td></tr></tbody></table>

\*NEW IN VERSION 24

## Source side options

You have to add them to the source side ([`&push`](/advanced-settings/setup-parameters/push.md)).

<table><thead><tr><th width="200.57142857142856">Parameter</th><th>Explanation</th></tr></thead><tbody><tr><td><a href="/pages/yE3QmHk94EU4CJX37WQt"><code>&#x26;rotate</code></a></td><td>Rotates the camera</td></tr><tr><td><a href="/pages/-Mj8JRa_qD4JmaOfXMmR"><code>&#x26;grid</code></a></td><td>Applies an rule-of-thirds grid overlay to the self-preview</td></tr><tr><td><a href="/pages/-MZNXgpzq94KEsZhCtkz"><code>&#x26;hideheader</code></a></td><td>Hides just the top header-bar</td></tr><tr><td><a href="/pages/-MZdusRVjfU8e_WyaUHV"><code>&#x26;hidemenu</code></a></td><td>Hides the VDO.Ninja-branded menu and header bar</td></tr><tr><td><a href="/pages/BXkYlejjo9Yzbm3HaBKn"><code>&#x26;tally</code></a></td><td>Will make the tally sign larger and colorize the background of the page</td></tr><tr><td><a href="/pages/-Mj8KoNIr4Zxrtxo0dN1"><code>&#x26;tallyoff</code></a></td><td>Disables the Tally Light's visibility for that particular guest</td></tr></tbody></table>

## **Viewer side options**

You have to add them to the viewer side ([`&view`](/advanced-settings/mixer-scene-parameters/view.md) or [`&scene`](/advanced-settings/mixer-scene-parameters/scene.md)).

<table><thead><tr><th width="216.57142857142856">Parameter</th><th>Explanation</th></tr></thead><tbody><tr><td><a href="/pages/1E182EgZAN1MpWLyDr5P"><code>&#x26;cleanviewer</code></a></td><td>Hides many of the UI elements and pop-ups that may cause unwanted visual elements</td></tr><tr><td><a href="/pages/-MZWysgysyBTBJNe8mPp"><code>&#x26;obsoff</code></a></td><td>Disables the tally light effects</td></tr><tr><td><a href="/pages/-MZWznsBRPVXwnIVQf9n"><code>&#x26;pip</code></a></td><td>Auto PIP the first loaded video</td></tr></tbody></table>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.vdo.ninja/advanced-settings/design-parameters.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.