Content disabled notification

Yes, that is built in. ?? But if you can’t see that on your site, maybe your theme fetches the videos in some other way which breaks that functionality.

Can you share a URL where you have a YouTube video where the problem appears?

Hi, thanks for the fast response.

I’m using Elementor and the code from the video is <iframe class="elementor-video" allowfullscreen="1" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" title="***********" src="https://www.youtube.com/embed/xxxxxxxxxxx?controls=1&rel=0&playsinline=0&modestbranding=0&autoplay=0&enablejsapi=1&origin=https%3A%2F%2Fdomain.tld&widgetid=1" id="widget2" width="640" height="360" frameborder="0"></iframe>

I wrote you a mail with the URL.

• This reply was modified 2 years, 3 months ago by mrmanuel.

So now I found out, that elementor changes the HTML code after the page is loaded. If you check the source code you find <div class="elementor-element elementor-element-b67b888 elementor-aspect-ratio-169 elementor-widget elementor-widget-video" data-id="b67b888" data-element_type="widget" data-settings="{&quot;youtube_url&quot;:&quot;https:\/\/www.youtube.com\/watch?v=xxxxxxxxxxx&quot;,&quot;video_type&quot;:&quot;youtube&quot;,&quot;controls&quot;:&quot;yes&quot;,&quot;aspect_ratio&quot;:&quot;169&quot;}" data-widget_type="video.default"> instead of the iFrame.

Could you add this?

That should work. And, also, I didn’t get that email. Send me a mail to jonk[at]followmedarling.se

Did you get my mail now?

Ok, so here’s the deal:
Elementor uses https://www.youtube.com/iframe_api to turn .elementor-element into an iframe (see console log). And since that is blocked, that won’t happen. You can choose 2 ways of moving forward.

1. Use a regular embed of YouTube videos and skip Elementors method.

2. Add https://www.youtube.com/ to Always allow > Scripts to keep using Elementors method. Keep in mind that you may break you GDPR compliance.

Console log:
jquery.min.js?ver=3.6.0:2 Refused to load the script ‘https://www.youtube.com/iframe_api’ because it violates the following Content Security Policy directive: “script-src ‘self’ ‘unsafe-inline’ ‘unsafe-eval’ https://cdn.md-service.net”. Note that ‘script-src-elem’ was not explicitly set, so ‘script-src’ is used as a fallback.

Ok, thanks! Please remove the CDN url ??

I used the 2nd way, but somehow I still do not see the notice that Cookies are disabled. After inspecting the website I found out that the CSS settings are hiding the notice:

<div class="warning-cacsp-iframe-content" style="height: 792px; width: 1408px; margin-top: -792px;">

Is it normal, that the margin-top is negative? As a workaround I added this code snipped to the whole page.

.warning-cacsp-iframe-content {
	margin-top: 0px !important;
}

Yes, negative margins is a good thing to use in many cases. In this case it calculates the height of size of the iframe, and moves the element up by the same amount placing the element where the iframe is, compare height 792px and margin-top -792px.

But since Elementor has the ugly code of .elementor-fit-aspect-ratio iframe that is not working as it should. So your local fix for Elementor is correct.

If you’re curious about negative margins:
https://www.google.com/search?client=firefox-b-d&q=negative+margins+css