https://github.com/netlogix/nlxvideoconsent
https://github.com/netlogix/nlxvideoconsent
Last synced: about 1 year ago
JSON representation
- Host: GitHub
- URL: https://github.com/netlogix/nlxvideoconsent
- Owner: netlogix
- Created: 2022-09-23T06:13:58.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2023-11-08T09:47:14.000Z (over 2 years ago)
- Last Synced: 2024-09-17T16:35:27.137Z (over 1 year ago)
- Language: JavaScript
- Size: 50.8 KB
- Stars: 2
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# nlxVideoConsent
**Important:**
This javascript needs the usercentrics service, since v3.0.0, to be included and running for it to work correctly. If you dont want to use usercentrics you can use the Tag v2.2.0.
Example:
```html
```
The element uses the maximum width and height allowed by its parent element respecting aspect-ratio.
## Global configuration
You can change the configuration for all elements on the Page by either setting the configuration on the `VideoProviderConsent` element class in javascript or by setting the `videoProviderConsentConfiguration` variable on the window object.
The keys of the configuration object are the names of the attributes. If both, configuration and attribute, with the same name are set, the attribute gets priority.
**Caution!:** The values need to be strings in order to preserve value similarity between configuration and attribute values.
```javascript
VideoProviderConsent.configuration = {
blur: 'true',
iconSize: '2rem',
};
// OR
window.videoProviderConsentConfiguration = {
blur: 'true',
iconSize: '2rem',
};
```
The window method will have better load time, because you don't need to wait for the element javascript to load.
## Attributes
### src (required)
The link to the video. Currently youtube and vimeo links are supported.
```html
```
### picture
The thumbnail picture to show if consent was not yet accepted.
```html
```
### thumbnail-proxy
A URL to a proxy Server to load thumbnails from. This is needed to show real thumbnails of the videos without giving third parties ip information of the customer.
This URL can contain characters to substitute values needed for fetching the right thumbnail:
- `<>` which is replaced by the video provider name (`youtube`, `vimeo`)
- `<>` which is the video id needed to fetch video information
```html
```
### autoplay
Allows to enable or disable autoplay when loading the page.
```html
```
### text
Placeholder text for information when video is not currently loaded.
```html
```
### aspect-ratio
The aspect-ratio used for the video and preview.
```html
```
### autoplay-on-confirm
Enables or disables autoplay when first confirming the consent. This is enabled by default to save clicks.
```html
```
### text-orientation
Changes the orientation of the text to the icon. This is `row` by default and can be any of the following values:
- row
- row-reverse
- column
- column-reverse
```html
```
### text-size
Changes the text size. Values are given in `rem`. 1 `rem` is 16 Pixels.
```html
```
### text-align
Changes the text align. Values possible are `left`, `center` and `right`. Default is `left`.
```html
```
### backdrop
Enables or disables the thumbnail backdrop. Values possible are `true` and `false`. Default is `true`.
```html
```
### backdrop-color
Changes the color of the thumbnail backdrop. Values possible are all available CSS colors (Hex, rgb, rgba etc.). Default is `rgba(102, 102, 102, 0.6)`.
```html
```
### icon-size
Changes the icon size. Values are given in `rem`. 1 `rem` is 16 Pixels.
```html
```
### show-icon
Shows or hides the video player icon. This can be used if you only want the text to show. This is `true` on default.
```html
```
### dark-mode
Changes the text and icon color if set to `true`, to black. This is helpful when using light color backgrounds.
```html
```
### blur
Blurs the thumbnail image of the video if set to `true`.
```html
```
### blur-strength
Changes strength of the `blur` effect. Values should be given in CSS units e.g. `px`, `rem`, `em`
```html
```