javascript - 延迟加载缩略图时阻止YouTube Cookies

标签 javascript jquery cookies youtube lazy-loading

https://bm-translations.de/上,我嵌入了一个YouTube iframe,其中嵌入了YouTube的nocookie域。为了优化速度,我仅通过lazyload加载缩略图。这是我的代码:

//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:
enter image description here
据我从WordPress Borlabs-Cookie插件了解到的那样,无需设置cookie就可以使用YouTube iframe,例如,您可以在此处看到(滚动到页面的末尾):https://keimster.de/ueber-das-keimen/
enter image description here
我想知道是否有人知道如何调整代码或任何其他好的解决方案,以使其在没有cookie横幅的情况下可以准备好gdpr(我没有技术选择来保存同意书等,也可以让用户选择退出)?

最佳答案

如果仔细观察,将有两个img标签:
enter image description here
您有重复的代码:

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

  • enter image description here
  • script标记内的代码嵌入到来自www.youtube-nocookie.com

  • enter image description here
    最后一步:
    对于缩略图,img.youtube-nocookie.com不起作用。您一直都在从youtube.com获取缩略图。
    将您的缩略图加载代码更改为:
    var source = "https://i1.ytimg.com/vi/"+ youtube[i].dataset.embed +"/sddefault.jpg";
    

    关于javascript - 延迟加载缩略图时阻止YouTube Cookies,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/64604459/

    相关文章:

    javascript - 如何删除 Vue.js 中的元素?

    javascript - 在 jquery Mobile 中获取表单 ID 'pageshow'

    javascript - VueJS - 通过注销组件清除后端服务器设置的 cookie

    javascript - .NET 和 JavaScript 中的 HttpCookie.HttpOnly

    javascript - 使用 PHP 或 JavaScript 在多个域上设置 cookie

    javascript - 我想在图像 <img source =""> 标签的路径中写入图标名称

    javascript - 将 HTML 写入新窗口打开的问题

    jquery - 我在使用 JQUERY MOBILE 时遇到 .focus() 问题

    javascript - 无法动态显示所有行

    javascript - 我怎样才能填充已经穿过的svg路径?