Issue with YouTube Embed Block in Gutenberg Editor

Hello,

I am encountering a problem with the YouTube Embed block in the Gutenberg editor on my WordPress site. When I embed a YouTube video using the YouTube Embed block, the video does not display correctly on the frontend, and I receive a console error. However, when I insert the same video via an HTML block by directly pasting the iframe code, the video functions as expected without any errors.

Access to XMLHttpRequest at ‘https://googleads.g.doubleclick.net/pagead/viewthroughconversion/962985656/?backend=innertube&cname=56&cver=20240827&foc_id=aS-igVSTyhIQopJHsWJN_A&label=followon_view&ptype=no_rmkt&random=945776183&cv_attributed=0’ (redirected from ‘https://www.youtube.com/pagead/viewthroughconversion/962985656/?backend=innertube&cname=56&cver=20240827&foc_id=aS-igVSTyhIQopJHsWJN_A&label=followon_view&ptype=no_rmkt&random=945776183&#8217😉 from origin ‘https://www.youtube.com’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.
mz9-zoWknA8:1 Access to XMLHttpRequest at ‘https://googleads.g.doubleclick.net/pagead/viewthroughconversion/962985656/?backend=innertube&cname=56&cver=20240827&foc_id=aS-igVSTyhIQopJHsWJN_A&label=followon_view&ptype=no_rmkt&random=945776183&cv_attributed=0’ (redirected from ‘https://www.youtube.com/pagead/viewthroughconversion/962985656/?backend=innertube&cname=56&cver=20240827&foc_id=aS-igVSTyhIQopJHsWJN_A&label=followon_view&ptype=no_rmkt&random=945776183&#8217😉 from origin ‘https://www.youtube.com’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.
mz9-zoWknA8:1 Access to XMLHttpRequest at ‘https://googleads.g.doubleclick.net/pagead/viewthroughconversion/962985656/?backend=innertube&cname=56&cver=20240827&foc_id=aS-igVSTyhIQopJHsWJN_A&label=followon_view&ptype=no_rmkt&random=945776183&cv_attributed=0’ (redirected from ‘https://www.youtube.com/pagead/viewthroughconversion/962985656/?backend=innertube&cname=56&cver=20240827&foc_id=aS-igVSTyhIQopJHsWJN_A&label=followon_view&ptype=no_rmkt&random=945776183&#8217😉 from origin ‘https://www.youtube.com’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.
googleads.g.doubleclick.net/pagead/viewthroughconversion/962985656/?backend=innertube&cname=56&cver=20240827&foc_id=aS-igVSTyhIQopJHsWJN_A&label=followon_view&ptype=no_rmkt&random=945776183&cv_attributed=0:1

   Failed to load resource: net::ERR_FAILED

googleads.g.doubleclick.net/pagead/viewthroughconversion/962985656/?backend=innertube&cname=56&cver=20240827&foc_id=aS-igVSTyhIQopJHsWJN_A&label=followon_view&ptype=no_rmkt&random=945776183&cv_attributed=0:1

   Failed to load resource: net::ERR_FAILED

googleads.g.doubleclick.net/pagead/viewthroughconversion/962985656/?backend=innertube&cname=56&cver=20240827&foc_id=aS-igVSTyhIQopJHsWJN_A&label=followon_view&ptype=no_rmkt&random=945776183&cv_attributed=0:1

   Failed to load resource: net::ERR_FAILED

The service worker navigation preload request was cancelled before ‘preloadResponse’ settled. If you intend to use ‘preloadResponse’, use waitUntil() or respondWith() to wait for the promise to settle.
mz9-zoWknA8:1 Access to XMLHttpRequest at ‘https://googleads.g.doubleclick.net/pagead/viewthroughconversion/962985656/?backend=innertube&cname=56&cver=20240827&foc_id=aS-igVSTyhIQopJHsWJN_A&label=followon_view&ptype=no_rmkt&random=904826731&cv_attributed=0’ (redirected from ‘https://www.youtube.com/pagead/viewthroughconversion/962985656/?backend=innertube&cname=56&cver=20240827&foc_id=aS-igVSTyhIQopJHsWJN_A&label=followon_view&ptype=no_rmkt&random=904826731&#8217😉 from origin ‘https://www.youtube.com’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.
mz9-zoWknA8:1 Access to XMLHttpRequest at ‘https://googleads.g.doubleclick.net/pagead/viewthroughconversion/962985656/?backend=innertube&cname=56&cver=20240827&foc_id=aS-igVSTyhIQopJHsWJN_A&label=followon_view&ptype=no_rmkt&random=904826731&cv_attributed=0’ (redirected from ‘https://www.youtube.com/pagead/viewthroughconversion/962985656/?backend=innertube&cname=56&cver=20240827&foc_id=aS-igVSTyhIQopJHsWJN_A&label=followon_view&ptype=no_rmkt&random=904826731&#8217😉 from origin ‘https://www.youtube.com’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.
mz9-zoWknA8:1 Access to XMLHttpRequest at ‘https://googleads.g.doubleclick.net/pagead/viewthroughconversion/962985656/?backend=innertube&cname=56&cver=20240827&foc_id=aS-igVSTyhIQopJHsWJN_A&label=followon_view&ptype=no_rmkt&random=904826731&cv_attributed=0’ (redirected from ‘https://www.youtube.com/pagead/viewthroughconversion/962985656/?backend=innertube&cname=56&cver=20240827&foc_id=aS-igVSTyhIQopJHsWJN_A&label=followon_view&ptype=no_rmkt&random=904826731&#8217😉 from origin ‘https://www.youtube.com’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.
googleads.g.doubleclick.net/pagead/viewthroughconversion/962985656/?backend=innertube&cname=56&cver=20240827&foc_id=aS-igVSTyhIQopJHsWJN_A&label=followon_view&ptype=no_rmkt&random=904826731&cv_attributed=0:1

Steps Taken:

1. Plugin Conflicts:

• I deactivated all plugins except for essential ones (such as WooCommerce) to ensure there were no conflicts. After re-enabling each plugin one by one, the issue remained, confirming that the problem is not caused by a plugin conflict.

1. Cache Clearing:

• I cleared the browser cache, as well as any server-side caching through plugins like WP Super Cache and W3 Total Cache. Despite this, the issue persisted.

1. Theme Testing:

• I switched to the default WordPress theme (Twenty Twenty-Three) to check if my theme was causing the issue. Even with the default theme, the YouTube Embed block failed to work properly.

1. WordPress and Gutenberg Updates:

• Both WordPress and the Gutenberg editor are fully updated to the latest versions. I even reinstalled the Gutenberg plugin to rule out any potential corruption, but this did not resolve the issue.

1. Header Modifications:

• I made adjustments to my server’s configuration, specifically modifying CORS (Cross-Origin Resource Sharing) and X-Frame-Options headers to ensure they were not blocking embedded content. The exact headers added were:

add_header 'Access-Control-Allow-Origin' '*';
add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
add_header 'Access-Control-Allow-Headers' 'Origin, X-Requested-With, Content-Type, Accept, Authorization';
add_header 'Access-Control-Allow-Credentials' 'true';

Additionally, I ensured that X-Frame-Options were correctly set to allow iframes:

add_header X-Frame-Options "ALLOW-FROM https://www.youtube.com/";

Despite these efforts, the YouTube Embed block still does not display the video correctly.

6. Preflight Requests Handling:

• I also added specific handling for preflight (OPTIONS) requests in the server configuration to ensure all headers and methods were correctly permitted. This did not resolve the issue either.

Outcome:

Even after implementing the above steps, the YouTube Embed block in Gutenberg fails to display videos correctly ( . The only way to get the video to work is by inserting the iframe code manually through an HTML block. This workaround is not ideal for regular content updates, as it complicates the editing process.

Request:

I would appreciate your assistance in identifying the root cause of this issue and providing a solution that allows the standard YouTube Embed block to function as intended.

Thank you for your help.

Best regards,