延迟加载缩略图时阻止 YouTube Cookie

Question

在 https://bm-translations.de/ 我有一个嵌入了 YouTube nocookie 域的 YouTube-iframe。为了优化速度，我只通过延迟加载加载缩略图。这是我的代码：

//youtube lazyload thumbnail
    ( function() {

    var youtube = document.querySelectorAll( ".youtube" );
    
    for (var i = 0; i < youtube.length; i++) {
        
        var source = "https://img.youtube-nocookie.com/vi/"+ youtube[i].dataset.embed +"/sddefault.jpg";
        
        var image = new Image();
                image.src = source;
                image.addEventListener( "load", function() {
                    youtube[ i ].appendChild( image );
                }( i ) );
        
                youtube[i].addEventListener( "click", function() {

                    var iframe = document.createElement( "iframe" );

                            iframe.setAttribute( "frameborder", "0" );
                            iframe.setAttribute( "allowfullscreen", "" );
                            iframe.setAttribute( "src", "https://www.youtube-nocookie.com/embed/"+ this.dataset.embed +"?rel=0&iv_load_policy=3&autoplay=1" );

                            this.innerHTML = "";
                            this.appendChild( iframe );
                } );    
    };
    
} )();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.lazyload/1.9.1/jquery.lazyload.min.js"></script>
<iframe name="frame" style="display:none;"></iframe>

不幸的是，它设置了一堆 cookie：

正如我从 WordPress Borlabs-Cookie 插件中了解到的那样，可以在不设置 cookie 的情况下使用 YouTube iframe，例如您可以在此处看到（滚动到页面末尾）：https://keimster.de/ueber-das-keimen/

我想知道是否有人知道如何调整代码或任何其他好的解决方案以使其在没有 cookie 横幅的情况下准备好 gdpr（我没有技术选项来保存同意等并让用户选择选择退出）？

Answer 1

如果你仔细观察，你有两个 img 标签：

您有重复的代码：

您 globaljs.js 中的代码从 youtube.com 加载。

您的 script 标签中嵌入的代码来自 www.youtube-nocookie.com

最后一步：

对于缩略图 img.youtube-nocookie.com 不起作用。您一直在从 youtube.com 获取缩略图。将您的缩略图加载代码更改为：

var source = "https://i1.ytimg.com/vi/"+ youtube[i].dataset.embed +"/sddefault.jpg";

延迟加载缩略图时阻止 YouTube Cookie

Block YouTube Cookies when lazyloading Thumbnail

javascript

youtube

cookies

jquery

lazy-loading