This project provides a drop-in replacement for the html iframe tag.
In situations where you have to comply with strict data protection requirements (for example in the EU: GDPR, DSGVO etc.) it can be useful to block iframes until the user has explicitly given his consent.
Make sure to include the iframe-consent.bundled.js in the head of your html file.
A basic iframe embedded video from YouTube looks like this:
<iframe width="560" height="315" src="https://www.youtube.com/embed/jNQXAC9IVRw" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>Just replace iframe with iframe-consent and provide some additional privacy policy message.
<iframe-consent responsive icon="auto" width="560" height="315" src="https://www.youtube.com/embed/jNQXAC9IVRw" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen>
<p>Provide a message for the user</p>
<p><a href="#">Link to privacy policy</a></p>
</iframe-consent>In addition iframe-consent has some useful exta attributes:
| Attribute | Description |
|---|---|
| responsive | Add this attr and the iframe will keep the dimension based on the width and height |
| accept="Accept button text" | Default is "Accept" |
| icon="auto,video,map,default" | Shows an icon on top of the consent message |
| poster="../src/to/img.jpg" | Provide a background image for the iframe wrapper |
You can change the style of the iframe-consent with CSS variables:
| Variable | Default value |
|---|---|
| --iframe-consent-wrapper-bg | #eee |
| --iframe-consent-wrapper-radius | - |
| --iframe-consent-wrapper-border | 1px solid #ccc |
| --iframe-consent-wrapper-iframe-border | 1px solid transparent |
| --iframe-consent-btn-border | 1px solid black |
| --iframe-consent-btn-color | white |
| --iframe-consent-btn-bg | black |
| --iframe-consent-btn-radius | 5px |
| --iframe-consent-btn-padding | 0.75rem 2rem |
| --iframe-consent-btn-font-weight | - |
| --iframe-consent-btn-font-family | - |
| --iframe-consent-btn-font-size | 1rem |
| --iframe-consent-btn-hover-color | white |
| --iframe-consent-btn-hover-bg | black |
| --iframe-consent-btn-hover-border-color | black |
| --iframe-consent-poster-opacity | 0.2 |
| --iframe-consent-poster-filter | - |
| --iframe-consent-icon-color | - |
| --iframe-consent-wrapper-mobile-bg | white |
If you are using Bootstrap v5 you can quickly adapt some basic styling by using bootstrap variables:
:root {
--iframe-consent-wrapper-radius:var(--bs-border-radius);
--iframe-consent-btn-bg:var(--bs-primary);
--iframe-consent-btn-border:1px solid var(--bs-primary);
--iframe-consent-btn-radius:var(--bs-border-radius);
--iframe-consent-btn-font-family:var(--bs-font-sans-serif);
--iframe-consent-btn-hover-bg: var(--bs-link-hover-color);
--iframe-consent-btn-hover-border-color: var(--bs-link-hover-color);
}See the LICENSE file for details