How to Fix Blank Embedded Videos and Maps on Your Website
Questions:
- Why is my YouTube video showing a blank box on my page?
- How do I allow Google Maps to display correctly on my shop?
- Where do I update Content Security Policies for embedded media?
Description:
What you notice: A YouTube or Vimeo video, a Google/OpenStreetMap map, or another "embedded" box from an outside website now shows a blank or empty area on your page.
Why this happens: When you embed a video or a map, you are really placing a small window into another company's website inside your page. For safety, your shop now only allows these embedded windows from companies on its trusted list — otherwise a scammer could embed a deceptive page. The video or map provider just isn't on the list yet.
Solution:
-
Navigate to Content Security Policies
Go to System Configuration → Security Configuration → Content security policies.
-
Find the field called frame src (this is the "trusted embedded windows" list).
-
Add the Provider Web Address
- Save and reload the page. The video or map should appear.
Tips and Tricks:
If the box appears but parts of it look broken, the embed may also load a font or send data — see How to Fix Missing External Fonts and Images and How to Unblock and Authorize External Connections When in doubt, hand this to your web agency.
Pro-Tips:
-
When whitelisting YouTube, add both [https://www.youtube.com](https://www.youtube.com) and [https://www.youtube-nocookie.com](https://www.youtube-nocookie.com) to prevent connection blocks across different privacy options.
-
If the embedded box displays but looks broken or lacks style, you may need to adjust separate security settings for fonts or outside connections.
-
If you are unsure of the exact domain to add for an external service, contact your web agency for technical assistance.
Warnings:
-
Your store cannot be embedded inside external websites, as this is a deliberate built-in protection designed to stop malicious clickjacking scams.
-
Only add verified, reputable companies to your frame src list to ensure scammers cannot load deceptive tracking pages inside your shop.
Note for your agency: The blocked frame appears as a frame-src CSP violation; add the provider origin under frame src, or register it in code with SecurityUtil::addAllowedSource("https://…", ["frame"]). Note frame-ancestors 'self' is enforced deliberately.