Return to Solutions Overview <-

GDPR Compliant YouTube Video iFrame blocking

GDPR Compliant YouTube Video iFrame blocking for Webflow

(Still under development as of March 15th 2023)

Put this in the body code section of your page or project:

<!-- [Custom Code] Load iFrames after cookie consent -->
<script>
// Values
const marketingCookiesAllowed = JSON.parse(localStorage.getItem('cookiefirst-consent') || '{}')['advertising'] || false

// Elements
const dataBlockIframes = document.querySelectorAll('iframe[data-block-src]')

// Loop
dataBlockIframes.forEach(function(iframe) {
    // Values
    const src = iframe.getAttribute('data-block-src')

    // If yt video logic
    if (src.indexOf('www.youtube.com') > -1) {
        function calcHeight() {
            iframe.style.height = `${ iframe.offsetWidth * 0.5625 }px`
        }
        calcHeight()
        window.addEventListener('resize', calcHeight);
    }

    // Remove
    iframe.removeAttribute('data-block-src')

    // Elements
    const dataBlockAltElement = iframe.closest('.w-embed')?.querySelector('[data-block-alt-element]')

    // Logic
    if (marketingCookiesAllowed) {
        iframe.setAttribute('src', src)
        if (dataBlockAltElement) dataBlockAltElement.style.display = 'none'
    } else {
        iframe.style.display = 'none'
        if (dataBlockAltElement) dataBlockAltElement.style.display = 'block'
    }
})
</script>

---

A possible iFrame of yours would look like this:

<iframe title="YOUR IFRAME TITLE HERE" data-block-src="https://www.youtube.com/embed/_YOUR_YOUTUBE_VIDEO_ID_HERE_" width="100%" allowfullscreen="true" frameborder="0" scrolling="no"></iframe>

<div data-block-alt-element>
	<p>Hier könnte ein YouTube-Video sein. Leider sind die Marketing-Cookies noch nicht akzeptiert worden.</p>
</div>

FAQs

You still have an open question about BMG.studio and how we operate. Chances are good that you will find what you are looking for here:

Why does this FAQ exist?

Well. As of Wednesday, March 15th 2023, I think this component looks really cool.

Can I clone this FAQ component?

Yes. Yes you can. You can do so -> here <-

Still have questions?

It's okay to reach out. Use either email or our calendar tool