# Configuration

When initialising the 3Q video player via a constructor, it is possible to include multiple configuration attributes. While `playoutId` and `container` (and in case of token protection `key` and `timestamp`) are mandatory, all other options are optional.

```html
<script>
const player = new js3q({
    playoutId: '5c3b0910-8850-11e7-9273-002590c750be',
    container: 'player',
    autoplay: true
});
</script>
```

## Parameters <a href="#page_parameters" id="page_parameters"></a>

If the player is protected, you need to generate and configure `key` and `timestamp`, as described in [Basic Usage](https://player.docs.3q.video/player-web-sdk/basic-usage).

### **General**

<table><thead><tr><th width="180.4765625">Parameter</th><th width="112.98828125">Type</th><th width="112.89453125">Default</th><th>Description</th></tr></thead><tbody><tr><td><strong>playoutId</strong></td><td>String</td><td>-</td><td>Video or Live-stream</td></tr><tr><td><strong>container</strong></td><td>String</td><td>-</td><td>The container where the player is placed.</td></tr><tr><td>key</td><td>String</td><td>-</td><td>Needed if player is protected</td></tr><tr><td>timestamp</td><td>Timestamp</td><td>-</td><td>Needed if player is protected. </td></tr><tr><td>autoplay</td><td>Boolean</td><td>false</td><td></td></tr><tr><td>allowmutedautoplay</td><td>Boolean</td><td>false</td><td>If autoplay is true and autoplay is not working, the player tries to autoplay the video muted.</td></tr><tr><td>chromecast</td><td>Boolean</td><td>false</td><td>Enables Remote playback</td></tr><tr><td>enabledTextTracks</td><td>Boolean</td><td>true</td><td>Enables subtitles if available</td></tr><tr><td>resumeAt</td><td>Integer</td><td>0</td><td>Resumes playback at given time.</td></tr><tr><td>initialQuality</td><td>Integer</td><td>360</td><td>The initial qualitiy level. Choose between 1080, 720, 480, 360, 240 and 144. The higher the value, the longer the video needs to cache before it can begin playing. If you choose a low value, the the video will start playing faster, but begin with a lower initial quality level. After the first few seconds playback quality will adapt automatically to the user's available bandwidth.</td></tr><tr><td>playbackRate</td><td>Number</td><td>1</td><td>Value of playback rate. Values 0-1 play slower than real time. Values greater than 1 play faster than real time</td></tr><tr><td>playbackRateMenu</td><td>Boolean</td><td>false</td><td>Show playbackRate menu</td></tr><tr><td>loop</td><td>Boolean</td><td>false</td><td></td></tr><tr><td>muted</td><td>Boolean</td><td>false</td><td></td></tr><tr><td>seo</td><td>Boolean</td><td>false</td><td>JSON-LD Data placement</td></tr><tr><td>preventNativeFullScreenOnIOS</td><td>Boolean</td><td>false</td><td>Prevent the player from switching to native mode on iOS</td></tr><tr><td>preview</td><td>Boolean</td><td>false</td><td>Limits the duration of the Video</td></tr><tr><td>previewtime</td><td>Number</td><td>30</td><td>Sets the duration of the preview</td></tr><tr><td>pictureInPicture</td><td>Boolean</td><td>false</td><td>Enables Picture in Picture</td></tr><tr><td>fullscreenOnOrientationChange</td><td>Boolean</td><td>false</td><td>Mobile only. Automatically switch to fullscreen, when the device gets rotated horizontally</td></tr><tr><td>sticky</td><td>Boolean</td><td>false</td><td>Sticks the player to the screen while Scrolling. Disables PictureInPicture Option.</td></tr><tr><td>stickyPosition</td><td>String</td><td>top-right</td><td>['top-left','top-right','bottom-left','bottom-right']</td></tr><tr><td>suppressFullscreen</td><td>Boolean</td><td>false</td><td>Hide the Fullscreen button and disable all ways to switch to fullscreen</td></tr><tr><td>polls</td><td>Boolean</td><td>true</td><td>Activate/Deaktivate live polls</td></tr></tbody></table>

### **Layout / Dimensions**

<table><thead><tr><th width="180.55859375">Parameter</th><th width="118.4296875">Type</th><th>Default</th><th>Description</th></tr></thead><tbody><tr><td>layout</td><td>String</td><td>responsive</td><td>[responsive|default|fixed]</td></tr><tr><td>width</td><td>String</td><td>-</td><td>[px|100%]</td></tr><tr><td>height</td><td>String</td><td>-</td><td>[px|100%]</td></tr><tr><td>tintColor</td><td>String</td><td>#009cd1</td><td></td></tr><tr><td>controlsPriority</td><td>array</td><td>['fullscreen', 'captions', 'settings', 'skip', 'volume', 'playpause', 'playlist', 'cast', 'time', 'chapters']</td><td>Priority of Controls in order to keep on smaller screens</td></tr><tr><td>cornerShape</td><td>String</td><td>squared</td><td>Border radius of elements within the player</td></tr><tr><td>playerShape</td><td>string</td><td>squared</td><td>Border radius of the player </td></tr></tbody></table>

### **Tracking / Analytics**

<table><thead><tr><th width="184.25">Parameter</th><th>Type</th><th>Default</th><th>Description</th></tr></thead><tbody><tr><td>tracking</td><td>Boolean</td><td>true</td><td>Video Engagemenent Tracking</td></tr><tr><td>trackingCookie</td><td>Boolean</td><td>true</td><td>Save the Tracking ID in the Cookies</td></tr><tr><td>trackingApi</td><td>String</td><td>v2</td><td>v1 (Reporting) | v2 (Analytics)</td></tr><tr><td>userToken</td><td>String</td><td>Custom String to identify the User</td><td></td></tr><tr><td>ga</td><td>Boolean</td><td>false</td><td>Google Analytics Tracking</td></tr><tr><td>gacallback</td><td>String</td><td>ga</td><td></td></tr></tbody></table>

### **Language and locales**

<table><thead><tr><th width="185.48046875">Parameter</th><th>Type</th><th>Default</th><th>Description</th></tr></thead><tbody><tr><td>locale</td><td>String</td><td>navigator.language</td><td>Player control navigation language. Available values: "de", "en", "es", "fr, "it", "nl"</td></tr><tr><td>defaultAudioLanguage</td><td>String</td><td>navigator.language</td><td></td></tr><tr><td>defaultCC</td><td>String</td><td>-</td><td>If available (e.g. "ger"), the set subtitle will be displayed without user interaction.</td></tr><tr><td>CCSize</td><td>Number</td><td>-</td><td>Default Size of Caoptions in px</td></tr></tbody></table>

### **Labels**

| Parameter | Type   | Description                                                      |
| --------- | ------ | ---------------------------------------------------------------- |
| labels    | Object | The language strings, that will be overwritten. See full example |

### **Controls**

| Parameter          | Type    | Default | Description |
| ------------------ | ------- | ------- | ----------- |
| controls           | Boolean | true    |             |
| controlBarAutoHide | Boolean | true    |             |

### **Advertising**

See chapter [Ad Integration](https://player.docs.3q.video/player-web-sdk/ad-integration).

### **Sharing**

| Parameter     | Type    | Default | Description                                                                                                                                                                                  |
| ------------- | ------- | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| embedCodeMenu | Boolean | false   | Enable Embed-Code for Sharing                                                                                                                                                                |
| sharing       | Boolean | false   |                                                                                                                                                                                              |
| shareItems    | Array   | \['']   | <p>Available Items:  'mail',<br>'facebook',<br>'twitter',<br>'threads',<br>'bluesky',<br>'reddit',<br>'whatsapp',<br>'linkedin',<br>'xing',<br>'messenger',<br>'telegram',<br>'mastodon'</p> |