So you have videos on your website. Probably load over Vimeo or Youtube. While Vimeo mostly doesn't use your videos for advertising It might be safe to still block them from loading until consent is given. In this tutorial we're going to set up a Youtube Video and only load it when consent is given for Marketing cookies.
Youtube loads over iframes (this tutorial can be used for all iframed content).
- You need the URL of a video you want to use. For instance this classical music piece by Yo Yo Ma https://www.youtube.com/embed/1prweT95Mo0
- You would need to change embed codes you'll get from Youtube, Vimeo or any other iframe source. The 'src=' part should be changed to data-src= and you would need to add also the category of cookies which needed to be consented too to load the video by adding: data-cookiefirst-category="functional" or advertising (when using Youtube for instance)
- You need to add some button or image directly before or after the iframe, it can onclick accept the category of cookies needed to load the iframe content.
- As you might see the iframe is still loaded and taking up space on your website. You can add this custom css to the page to hide it.
iframe:not([src]) {
display: none;
}
So this is an example code which displays a button "Accept marketing cookies to load this video". On click it will load a video.
<iframe width="640" height="360" frameborder="0" allowfullscreen="allowfullscreen" data-src="https://www.youtube.com/embed/1prweT95Mo0" data-cookiefirst-category="advertising"></iframe>
<div class="cookiefirst-disabled-resource">
Please <button onclick="CookieFirst.acceptCategory('advertising')">Accept marketing cookies</button> to watch this video.
</div>