JSFiddle - React, Tailwind, and code Playground

by NOVUSIDEA

HTML

<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/css/bootstrap.min.css">
<h3>Not Responsive</h3>
<iframe class="embed-responsive-item" width="560" height="315" src="https://www.youtube.com/embed/ba2o0sUxplw" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

<h3>Responsive</h3>
<div class="embed-responsive embed-responsive-16by9">
    <iframe class="embed-responsive-item" width="560" height="315" src="https://www.youtube.com/embed/KG3oSSN6YXE" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>

SCSS

.iframe-wrapper {
    position: relative;
    display: inline-block;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    font-size: 12px;

    .iframe-message {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: #f3f3f3;
        box-shadow: inset 0 0 0 1px #e3e3e3;
        z-index: 5;
    }

    .iframe-content {
        padding: 1rem 5rem;
        position: absolute;
        top: 50%;
        left: 0;
        right: 0;
        text-align: center;
        transform: translateY(-50%);
    }

    .iframe-content p:last-child {
        margin-bottom: 0;
    }

    .iframe-icon {
        display: inline-block;
        font-size: 4rem;
        opacity: 0.5;
    }

    iframe {
        position: relative;
        display: block;
        z-index: 0;
    }
}

JavaScript

function setCookie(name, value, days) {
    var d = new Date;
    d.setTime(d.getTime() + 24*60*60*1000*days);
    document.cookie = name + "=" + value + ";path=/;expires=" + d.toGMTString();
}

function getCookie(name) {
    var v = document.cookie.match('(^|;) ?' + name + '=([^;]*)(;|$)');
    return v ? v[2] : null;
}

function deleteCookie(name) {
    setCookie(name, '', -1);
}

document.addEventListener('DOMContentLoaded', function() {

    if( getCookie('load-iframe-source') == '1' ) {
        return;
    }

    if( confirm('Cookie für das Laden externer Inhalte (<iframe>) setzen?') ) {
        setCookie('load-iframe-source', 1);
    }

    var iframes = document.querySelectorAll('iframe');

    for (var i = 0; i < iframes.length; i++) {

        var iframe  = iframes[i],
            source  = iframe.getAttribute('src');

        if (typeof source === 'undefined' || source === '') {
            continue;
        }

        iframe.removeAttribute('src');
        iframe.setAttribute('data-src', source);

    }

});

window.addEventListener('load', function() {

	var iframes = document.querySelectorAll('iframe'),
        messageContent = '<p>Dieser externe Inhalt speichert möglicherweise Cookies und wurde daher aus Datenschutz-Gründen deaktivert.</p>' +
        '<p><button class="iframe-accept">Alle Inhalte dieser Art laden</button></p>';

	if( getCookie('load-iframe-source') == '1' ) {
        for (var i = 0; i < iframes.length; i++) {
        	var iframe = iframes[i],
                source = iframe.getAttribute('data-src');
            if( source != null ) {
            	iframe.setAttribute('src', source);
                iframe.removeAttribute('data-src');
                iframe.nextSibling.remove();
            }
        }
    }

    if( getCookie('load-iframe-source') == '1' ) {
        return;
    }

    for (var i = 0; i < iframes.length; i++) {

        var iframe  = iframes[i],
            classes = iframe.getAttribute('class');

       ...