BUG: YouTube now requires referrerpolicy="strict-origin-when-cross-origin" attribute on embedded video iframes for proper playback.
Question
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?
- Try adding a YouTube video to a landing page and find out.
What is the expected behavior?
- YouTube video renders and is playable
What is the current behavior?
- 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
- [x] I agree to follow this project's Code of ConductAnswers (0)
No answers yet.
Related Questions and Answers
Continue research with similar issue discussions.
Issue #6535
BUG(v 1.0.48): Pasting rich content splits attribute values into individual attributes
GrapesJS version [x] I confirm to use the latest version of GrapesJS What browser are you using? Chrome Reproducible demo link Change your...
Issue #6409
BUG: Cannot drag to move components on mobile
GrapesJS version [x] I confirm to use the latest version of GrapesJS What browser are you using? Chrome v133 Reproducible demo link https:/...
Issue #6324
BUG: sorter.setDragHelper is not a function on block drag
GrapesJS version[X] I confirm to use the latest version of GrapesJSWhat browser are you using? 131.0.6778.86Reproducible demo link https://...
Issue #5742
BUG: Building on Windows 10+
GrapesJS version [X] I confirm to use the latest version of GrapesJS What browser are you using? Chrome v122 Reproducible demo link N/A Des...
Paid Plugins That Match This Issue
Curated by issue keywords and label relevance to help you ship faster.
Loading paid plugin recommendations...
Browse Plugin Categories
Jump directly to plugin category pages on the marketplace.