This is a simple React component that allows to wrap iframes into a viewport-responsive privacy layer that has to be acknowledged before loading external data. It was originally intended for use in [Docusaurus](https://www.docusaurus.io) but should work i
This is a simple React component that allows to wrap iframes into a viewport-responsive privacy layer that has to be acknowledged before loading external data. It was originally intended for use in Docusaurus but should work in any React context.
In your project, execute
``
npm install --save video-privacy
Then, import the component where you wish to use it:
`
import VideoPrivacy from "video-privacy"
Simply wrap the embed code in the component, like in this example:
`
height="450"
src="https://www.youtube.com/embed/b5c2oawLPU8"
title="Ontologien - was ist das eigentlich?"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
referrerpolicy="strict-origin-when-cross-origin"
allowfullscreen
>
The component can be customized with props, for example:
`
width={1024}
info="Your text goes here"
imageUrl="https://your_backdrop.jpg"
>
* width\
Description: The width of the privacy container. Should be the same as the width of the iframe to prevent awkward results.\
Type: Number\
Default value: 800
* info\
Description: The info text to be displayed\
Type: String\
Default value: "Please indicate that you understand that this video is loaded from an external source."
* buttonText\
Description: The text on the acknowledge button\
Type: String\
Default value: "I understand"
* cookie\
Description: Save user acknowledgement to a session cookie to suppress further privacy notices\
Type: Boolean\
Default value: false
* cookieName\
Description: Set a custom name for acknowledgement cookie (useful for differently scoped consent rules across your website)\
Type: String\
Default value: "video-privacy-acknowledged"
* cookieExpires\
Description: Set a custom expiration period in days for the cookie\
Type: Number\
Default value: empty (i. e., cookie expires after session)
* imageUrl\
Description: The URL of a preview image to be shown as backrop in the container\
Type: String\
Default value: empty
* customInfoClass\
Description: A CSS class definition for styling the info text\
Type: String\
Default value: empty
* customButtonClass`\
Description: A CSS class definition for styling the acknowledge button\
Type: String\
Default value: empty