youtube-llt

/* YOUTUBE LAZY LOAD - Ersetzt iframes durch Thumbnails */
.yt-lazy {
    position: relative;
    display: block;
    cursor: pointer;
    background: #000000;
    overflow: hidden;
    max-width: 100%;
}

.yt-lazy img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.85;
    transition: opacity 0.2s ease;
}

.yt-lazy:hover img {
    opacity: 1.0;
}

.yt-lazy .yt-play {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 72px;
    height: 50px;
    margin-left: -36px;
    margin-top: -25px;
    background: rgba(204, 0, 0, 0.9);
    border-radius: 12px;
    z-index: 10;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease;
}

.yt-lazy:hover .yt-play {
    background: rgba(255, 0, 0, 1);
    transform: scale(1.1);
}

.yt-lazy .yt-play:after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -6px;
    margin-top: -12px;
    border-style: solid;
    border-width: 12px 0 12px 22px;
    border-color: transparent transparent transparent #FFFFFF;
}

.yt-lazy .yt-title {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 8px 12px;
    background: rgba(0, 0, 0, 0.7);
    color: #FFFFFF;
    font-size: 13px;
    font-family: Arial, Helvetica, sans-serif;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Ladeanimation */
.yt-lazy.yt-loading .yt-play {
    background: rgba(100, 100, 100, 0.8);
    animation: yt-pulse 1s ease-in-out infinite;
}

@keyframes yt-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

(function () {
    /* ============================================================
     * YOUTUBE LAZY LOADER
     * FIX 24.02.2026: Ersetzt YouTube iframes durch Thumbnails
     * Verhindert WebGL Context Overflow + Tracking Prevention Spam
     * Kompatibel mit Windows 2000 / alte Browser
     * ============================================================ */

    var PREFIX = '[YT-Lazy] ';
    var PROCESSED = 'data-yt-lazy';
    var initialized = false;

    function log(msg) {
        if (window.console && console.log) {
            console.log(PREFIX + msg);
        }
    }

    /* YouTube Video-ID aus verschiedenen URL-Formaten extrahieren */
    function extractVideoId(src) {
        if (!src) return null;
        var patterns = [
            /\/embed\/([a-zA-Z0-9_-]{11})/,
            /\/v\/([a-zA-Z0-9_-]{11})/,
            /[?&]v=([a-zA-Z0-9_-]{11})/
        ];
        for (var i = 0; i < patterns.length; i++) {
            var match = src.match(patterns[i]);
            if (match) return match[1];
        }
        return null;
    }

    /* Pruefen ob iframe ein YouTube-Embed ist */
    function isYouTube(iframe) {
        var src = iframe.getAttribute('src') || '';
        return src.indexOf('youtube.com') !== -1 ||
               src.indexOf('youtube-nocookie.com') !== -1 ||
               src.indexOf('youtu.be') !== -1;
    }

    /* URL-Parameter aus Original-iframe-src extrahieren */
    function getEmbedParams(src) {
        var params = '';
        var qIndex = src.indexOf('?');
        if (qIndex !== -1) {
            params = src.substring(qIndex);
        }
        /* Autoplay hinzufuegen wenn nicht vorhanden */
        if (params.indexOf('autoplay') === -1) {
            params += (params.indexOf('?') !== -1 ? '&' : '?') + 'autoplay=1';
        }
        return params;
    }

    /* Thumbnail-Container bauen */
    function createPlaceholder(iframe, videoId) {
        var src = iframe.getAttribute('src') || '';

        /* Groesse vom Original iframe uebernehmen */
        var w = iframe.getAttribute('width') || iframe.style.width || '560';
        var h = iframe.getAttribute('height') || iframe.style.height || '315';

        /* Einheiten normalisieren */
        var wStr = (w + '').indexOf('%') !== -1 ? w : w + 'px';
        var hStr = (h + '').indexOf('%') !== -1 ? h : h + 'px';

        /* Container */
        var container = document.createElement('div');
        container.className = 'yt-lazy';
        container.setAttribute('data-video-id', videoId);
        container.setAttribute('data-embed-params', getEmbedParams(src));
        container.style.width = wStr;
        container.style.height = hStr;

        /* Inline-Styles vom iframe uebernehmen */
        if (iframe.style.maxWidth) container.style.maxWidth = iframe.style.maxWidth;
        if (iframe.style.margin) container.style.margin = iframe.style.margin;

        /* Thumbnail - hqdefault ist immer verfuegbar */
        var thumb = document.createElement('img');
        thumb.src = 'https://img.youtube.com/vi/' + videoId + '/hqdefault.jpg';
        thumb.alt = 'YouTube Video';
        thumb.style.width = '100%';
        thumb.style.height = '100%';

        /* Play Button */
        var playBtn = document.createElement('div');
        playBtn.className = 'yt-play';

        container.appendChild(thumb);
        container.appendChild(playBtn);

        /* Klick-Handler: Laedt den echten iframe */
        function onClick(e) {
            if (e && e.preventDefault) e.preventDefault();

            container.className += ' yt-loading';
            log('Lade Video: ' + videoId);

            var newIframe = document.createElement('iframe');
            newIframe.setAttribute('width', w);
            newIframe.setAttribute('height', h);
            newIframe.style.width = wStr;
            newIframe.style.height = hStr;
            newIframe.setAttribute('frameborder', '0');
            newIframe.setAttribute('allowfullscreen', '');
            newIframe.setAttribute('allow', 'autoplay; encrypted-media');
            newIframe.src = 'https://www.youtube-nocookie.com/embed/' +
                           videoId + container.getAttribute('data-embed-params');

            /* Container durch iframe ersetzen */
            if (container.parentNode) {
                container.parentNode.replaceChild(newIframe, container);
                log('Video geladen: ' + videoId);
            }

            return false;
        }

        if (container.addEventListener) {
            container.addEventListener('click', onClick, false);
        } else if (container.attachEvent) {
            container.attachEvent('onclick', onClick);
        }

        return container;
    }

    /* Alle YouTube iframes auf der Seite finden und ersetzen */
    function processIframes() {
        var iframes = document.getElementsByTagName('iframe');
        var count = 0;
        var toReplace = [];

        /* Erst sammeln, dann ersetzen (live NodeList!) */
        for (var i = 0; i < iframes.length; i++) {
            var iframe = iframes[i];

            /* Bereits verarbeitet? */
            if (iframe.getAttribute(PROCESSED)) continue;

            if (isYouTube(iframe)) {
                var videoId = extractVideoId(iframe.getAttribute('src'));
                if (videoId) {
                    toReplace.push({ iframe: iframe, videoId: videoId });
                }
            }
        }

        /* Jetzt ersetzen */
        for (var j = 0; j < toReplace.length; j++) {
            var item = toReplace[j];
            var placeholder = createPlaceholder(item.iframe, item.videoId);

            if (item.iframe.parentNode) {
                item.iframe.parentNode.replaceChild(placeholder, item.iframe);
                count++;
            }
        }

        if (count > 0) {
            log(count + ' YouTube iframe(s) durch Thumbnails ersetzt');
        }

        return count;
    }

    /* Init */
    function init() {
        if (initialized) {
            log('SKIP: Bereits initialisiert (Singleton)');
            return;
        }
        initialized = true;

        log('Init gestartet...');
        var count = processIframes();

        if (count === 0) {
            log('Keine YouTube iframes gefunden');
        }

        /* MutationObserver fuer dynamisch nachgeladene iframes */
        if (window.MutationObserver) {
            var observer = new MutationObserver(function (mutations) {
                var hasNew = false;
                for (var i = 0; i < mutations.length; i++) {
                    if (mutations[i].addedNodes && mutations[i].addedNodes.length > 0) {
                        hasNew = true;
                        break;
                    }
                }
                if (hasNew) {
                    processIframes();
                }
            });
            observer.observe(document.body, { childList: true, subtree: true });
            log('MutationObserver aktiv (dynamische iframes)');
        }

        log('Fertig!');
    }

    /* Start */
    if (document.readyState === 'complete') {
        init();
    } else if (document.addEventListener) {
        document.addEventListener('DOMContentLoaded', init, false);
    } else {
        window.onload = init;
    }
})();

NoElements {}