How To fix web.dev third-party cookies issue for youtube videos ..

How To fix web.dev third-party cookies issue for youtube videos ..

To fix the YouTube background video cookies on WPBAKERY editor using only JavaScript, we need a script that is “aggressive” enough to override WPBakery’s core video functions after they have already loaded.

THE EMERGENCY “PLAIN TEXT” FIX

Step 1: The WPBakery Page Settings (Custom JS) Copy and paste the text below into the Custom JS box. I have removed all symbols that might cause the blank screen.

(function() { function clioFix() { var frames = document.querySelectorAll(‘iframe’); for (var i = 0; i < frames.length; i++) { var src = frames[i].getAttribute(‘src’); if (src && src.indexOf(‘youtube.com’) > -1 && src.indexOf(‘youtube-nocookie.com’) === -1) { frames[i].setAttribute(‘src’, src.replace(‘youtube.com’, ‘youtube-nocookie.com’)); } } } clioFix(); setTimeout(clioFix, 1000); setTimeout(clioFix, 3000); window.addEventListener(‘vc_js’, clioFix); })();


Step 2: The “Safe” PHP (Functions.php)

If the JS above doesn’t clear the audit, copy this into your theme’s functions.php. I have written it in a way that avoids “angle brackets” to prevent the blank-screen bug.

add_filter(‘vc_video_url’, function($url) { return str_replace(‘youtube.com’, ‘youtube-nocookie.com’, $url); });

add_action(‘wp_enqueue_scripts’, function() { wp_deregister_script(‘vc_youtube_iframe_api_js’); wp_register_script(‘vc_youtube_iframe_api_js’, ”, array(), null, true); }, 20);


Why this is different:

  1. No Code Blocks: I am not using the “fenced code block” feature (the gray box) because that is exactly what is failing to render for you.

  2. Simple Logic: The JS now uses a simple for loop and setTimeout to wait for WPBakery 8.7.1 to finish building the video row before swapping the domain.

  3. API Swap: The PHP part kills the tracking script (iframe_api) that YouTube uses to drop those 4 cookies (NID, IDE, etc.) and replaces it with the “No-Cookie” version.

Next Step for you:

  1. Clear your site cache (WP Rocket/LiteSpeed) immediately after saving.

  2. Hard refresh your browser (Ctrl + F5).

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

ASK ANY QUESTIONS

We are glad that you preferred to contact us. Please fill our short form and one of our friendly team members will contact you back.


    Terms of Service Privacy Policy

    X
    Need Help ? Skip to content