BUG: YouTube now requires referrerpolicy="strict-origin-when-cross-origin" attribute on embedded video iframes for proper playback.

[J-Wick4]

GrapesJS version

• I confirm to use the latest version of GrapesJS

What browser are you using?

Brave

Reproducible demo link

na

Describe the bug

How to reproduce the bug?

1. Try adding a YouTube video to a landing page and find out.

What is the expected behavior?

1. YouTube video renders and is playable

What is the current behavior?

1. YouTube produces and error and requires users to visit YouTube.com to watch video because of an extra requirement of a attribute in the iframe code.

Issue: YouTube now requires referrerpolicy="strict-origin-when-cross-origin" attribute
on embedded video iframes for proper playback.

Changes needed in renderYoutube() and renderYoutubeNoCookie() methods:
Add: el.setAttribute('referrerpolicy', 'strict-origin-when-cross-origin');
After: el.setAttribute('allowfullscreen', 'true');

If it is necessary to execute some code to reproduce the bug, paste it below:

--- a/packages/core/src/dom_components/view/ComponentVideoView.ts
+++ b/packages/core/src/dom_components/view/ComponentVideoView.ts
@@ -105,6 +105,7 @@ export default class ComponentVideoView extends ComponentImageView<ComponentVide
el.src = this.model.getYoutubeSrc();
el.frameBorder = '0';
el.setAttribute('allowfullscreen', 'true');

• el.setAttribute('referrerpolicy', 'strict-origin-when-cross-origin');
  this.initVideoEl(el);
  return el;
  }
  @@ -113,6 +114,7 @@ export default class ComponentVideoView extends ComponentImageView<ComponentVide
  var el = document.createElement('iframe');
  el.src = this.model.getYoutubeNoCookieSrc();
  el.frameBorder = '0';
  el.setAttribute('allowfullscreen', 'true');
• el.setAttribute('referrerpolicy', 'strict-origin-when-cross-origin');
  this.initVideoEl(el);
  return el;
  }

---

Code of Conduct

• I agree to follow this project's Code of Conduct