{"id":27079000,"url":"https://github.com/netlogix/nlxvideoconsent","last_synced_at":"2025-04-06T01:20:26.005Z","repository":{"id":137999231,"uuid":"540304413","full_name":"netlogix/nlxVideoConsent","owner":"netlogix","description":null,"archived":false,"fork":false,"pushed_at":"2023-11-08T09:47:14.000Z","size":52,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":3,"default_branch":"main","last_synced_at":"2024-09-17T16:35:27.137Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/netlogix.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2022-09-23T06:13:58.000Z","updated_at":"2022-11-22T10:51:39.000Z","dependencies_parsed_at":"2023-11-07T16:29:11.505Z","dependency_job_id":"e7e5f0ca-6733-40c1-80ea-2959ba5eb867","html_url":"https://github.com/netlogix/nlxVideoConsent","commit_stats":null,"previous_names":[],"tags_count":16,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/netlogix%2FnlxVideoConsent","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/netlogix%2FnlxVideoConsent/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/netlogix%2FnlxVideoConsent/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/netlogix%2FnlxVideoConsent/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/netlogix","download_url":"https://codeload.github.com/netlogix/nlxVideoConsent/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247421105,"owners_count":20936231,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-04-06T01:20:25.411Z","updated_at":"2025-04-06T01:20:25.997Z","avatar_url":"https://github.com/netlogix.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# nlxVideoConsent\n\n**Important:**\n\nThis 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.\n\nExample:\n\n```html\n\u003cdiv style=\"max-height: 330px; max-width: 560px;\"\u003e\n    \u003cvideo-provider-consent\n        src=\"https://www.youtube.com/watch?v=\u003cYourId\u003e\"\n        text=\"Example Video\"\n    \u003e\u003c/video-provider-consent\u003e\n\u003c/div\u003e\n```\n\nThe element uses the maximum width and height allowed by its parent element respecting aspect-ratio.\n\n## Global configuration\nYou 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.\nThe 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.\n**Caution!:** The values need to be strings in order to preserve value similarity between configuration and attribute values.\n\n```javascript\nVideoProviderConsent.configuration = {\n    blur: 'true',\n    iconSize: '2rem',\n};\n\n// OR\n\nwindow.videoProviderConsentConfiguration = {\n    blur: 'true',\n    iconSize: '2rem',\n};\n```\n\nThe window method will have better load time, because you don't need to wait for the element javascript to load.\n\n## Attributes\n\n### src (required)\nThe link to the video. Currently youtube and vimeo links are supported.\n\n```html\n\u003cvideo-provider-consent\n    src=\"https://www.youtube.com/watch?v=\u003cYourId\u003e\"\n\u003e\u003c/video-provider-consent\u003e\n```\n\n### picture\nThe thumbnail picture to show if consent was not yet accepted.\n\n```html\n\u003cvideo-provider-consent\n    src=\"https://www.youtube.com/watch?v=\u003cYourId\u003e\"\n    picture=\"\u003cURL to picture\u003e\"\n\u003e\u003c/video-provider-consent\u003e\n```\n\n### thumbnail-proxy\nA 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.\nThis URL can contain characters to substitute values needed for fetching the right thumbnail:\n- `\u003c\u003cprovider\u003e\u003e` which is replaced by the video provider name (`youtube`, `vimeo`)\n- `\u003c\u003cvideoId\u003e\u003e` which is the video id needed to fetch video information\n\n```html\n\u003cvideo-provider-consent\n    src=\"https://www.youtube.com/watch?v=\u003cYourId\u003e\"\n    thumbnail-proxy=\"\\\u003cYour thumbnail proxy base url\\\u003e\\?provider=\\\u003c\\\u003cprovider\\\u003e\\\u003e\\\u0026videoId=\\\u003c\\\u003cvideoId\\\u003e\\\u003e\"\n\u003e\u003c/video-provider-consent\u003e\n```\n\n### autoplay\nAllows to enable or disable autoplay when loading the page.\n\n```html\n\u003cvideo-provider-consent\n    src=\"https://www.youtube.com/watch?v=\u003cYourId\u003e\"\n    autoplay=\"true\"\n\u003e\u003c/video-provider-consent\u003e\n```\n\n### text\nPlaceholder text for information when video is not currently loaded.\n\n```html\n\u003cvideo-provider-consent\n    src=\"https://www.youtube.com/watch?v=\u003cYourId\u003e\"\n    text=\"this is example text\"\n\u003e\u003c/video-provider-consent\u003e\n```\n\n### aspect-ratio\nThe aspect-ratio used for the video and preview.\n\n```html\n\u003cvideo-provider-consent\n    src=\"https://www.youtube.com/watch?v=\u003cYourId\u003e\"\n    aspect-ratio=\"16/10\"\n\u003e\u003c/video-provider-consent\u003e\n```\n\n### autoplay-on-confirm\nEnables or disables autoplay when first confirming the consent. This is enabled by default to save clicks.\n\n```html\n\u003cvideo-provider-consent\n    src=\"https://www.youtube.com/watch?v=\u003cYourId\u003e\"\n    autoplay-on-confirm=\"false\"\n\u003e\u003c/video-provider-consent\u003e\n```\n\n### text-orientation\nChanges the orientation of the text to the icon. This is `row` by default and can be any of the following values:\n- row\n- row-reverse\n- column\n- column-reverse\n\n```html\n\u003cvideo-provider-consent\n    src=\"https://www.youtube.com/watch?v=\u003cYourId\u003e\"\n    text-orientation=\"row-reverse\"\n\u003e\u003c/video-provider-consent\u003e\n```\n\n### text-size\nChanges the text size. Values are given in `rem`. 1 `rem` is 16 Pixels.\n\n```html\n\u003cvideo-provider-consent\n    src=\"https://www.youtube.com/watch?v=\u003cYourId\u003e\"\n    text-size=\"2\"\n\u003e\u003c/video-provider-consent\u003e\n```\n\n### text-align\nChanges the text align. Values possible are `left`, `center` and `right`. Default is `left`.\n\n```html\n\u003cvideo-provider-consent\n    src=\"https://www.youtube.com/watch?v=\u003cYourId\u003e\"\n    text-align=\"center\"\n\u003e\u003c/video-provider-consent\u003e\n```\n\n### backdrop\nEnables or disables the thumbnail backdrop. Values possible are `true` and `false`. Default is `true`.\n\n```html\n\u003cvideo-provider-consent\n    src=\"https://www.youtube.com/watch?v=\u003cYourId\u003e\"\n    backdrop=\"false\"\n\u003e\u003c/video-provider-consent\u003e\n```\n\n### backdrop-color\nChanges 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)`.\n\n```html\n\u003cvideo-provider-consent\n    src=\"https://www.youtube.com/watch?v=\u003cYourId\u003e\"\n    backdrop-color=\"rgba(102, 102, 102, 0.2)\"\n\u003e\u003c/video-provider-consent\u003e\n```\n\n### icon-size\nChanges the icon size. Values are given in `rem`. 1 `rem` is 16 Pixels.\n\n```html\n\u003cvideo-provider-consent\n    src=\"https://www.youtube.com/watch?v=\u003cYourId\u003e\"\n    icon-size=\"5\"\n\u003e\u003c/video-provider-consent\u003e\n```\n\n### show-icon\nShows or hides the video player icon. This can be used if you only want the text to show. This is `true` on default.\n\n```html\n\u003cvideo-provider-consent\n    src=\"https://www.youtube.com/watch?v=\u003cYourId\u003e\"\n    show-icon=\"false\"\n\u003e\u003c/video-provider-consent\u003e\n```\n\n### dark-mode\nChanges the text and icon color if set to `true`, to black. This is helpful when using light color backgrounds.\n\n```html\n\u003cvideo-provider-consent\n    src=\"https://www.youtube.com/watch?v=\u003cYourId\u003e\"\n    dark-mode=\"true\"\n\u003e\u003c/video-provider-consent\u003e\n```\n\n### blur\nBlurs the thumbnail image of the video if set to `true`.\n\n```html\n\u003cvideo-provider-consent\n    src=\"https://www.youtube.com/watch?v=\u003cYourId\u003e\"\n    blur=\"true\"\n\u003e\u003c/video-provider-consent\u003e\n```\n\n\n### blur-strength\nChanges strength of the `blur` effect. Values should be given in CSS units e.g. `px`, `rem`, `em` \n\n```html\n\u003cvideo-provider-consent\n    src=\"https://www.youtube.com/watch?v=\u003cYourId\u003e\"\n    blur-strength=\"2px\"\n\u003e\u003c/video-provider-consent\u003e\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnetlogix%2Fnlxvideoconsent","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnetlogix%2Fnlxvideoconsent","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnetlogix%2Fnlxvideoconsent/lists"}