Hi @tinareisweb,
Could you try wrapping your video in another pair of <div> tags?
Example:
<div><iframe width="560" height="315" src="https://www.youtube.com/embed/DhFmMMX45gw" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
Kind regards,
Jarno
Thread Starter
Tina
(@tinareisweb)
Hi Jarno,
Thanks for the quick reply! That does actually solve it, wow.
However, it means editors have to use HTML block in the backend, insert iframe code, then insert <div> tags. They’re not too tech-savvy, that’s definitely not a workable solution for us.
Is there a way to fix it without having to insert tags manually?
Best,
Tina
Hi @tinareisweb,
The HTML block is added to Oxygen builder? You could add the HTML block in another column/section (I don’t know how it is called in Oxygen builder), this will create a DIV as well.
I have another solution with some Javascript to fix it for every video, but this is a bit technical and will add some weight to the website.
regards Aert
Thread Starter
Tina
(@tinareisweb)
Hi,
It’s not added in Oxygenbuilder, actually Oxygenbuilder is only doing the templates, but content is added in normal Gutenberg editor.
The problem occurs with both the normal Gutenberg Youtube-block and the Gutenberg HTML block (for inserting iframe).
So I’m not even sure the problem is caused by Oxygen because Oxygen is not touching the content of posts per se. I tried checking for JS/CSS conflicts but couldn’t find any. No caching plugins etc. are enabled.
If there’s no other solution, I’d highly appreciate the JS snippet even if it adds weight to the site (I should be okay with the technical implementation), because we also have a ton of old posts that have video embeds and it would be a ton of work to go into each one and add a section/container for them! 🙂
Thank you for your quick responses,
Tina
@tinareisweb
Recently we added a new filter that also allows a server side, solution for this, which doesn’t affect website performance:
/**
* @param string $html
*
* @return string
*/
function cmplz_add_div_iframe($html){
return '<div>'.$html.'</div>';
}
add_filter( 'cmplz_iframe_html', 'cmplz_add_div_iframe' );
You can add it as mu-plugin :https://complianz.io/adding-filters-with-mu-plugins-quick-easy/
It will wrap each blocked iframe in a div.
Thread Starter
Tina
(@tinareisweb)
Hi, nice, thank you!
Implemented as mu-plugin and it works for iframes.
Two questions remain:
- The iframe has width=”560″ height=”315″, but Complianz calculates the placeholder to be 560 x 420px, which gives the placeholder an ugly border and causes a layout shift when users accept cookies. Can we fix it? See example on my site
- Can we make this code work for the Gutenberg YouTube block as well? On the example page, I have the same video embedded two times, one HTML block with iframe code and below a YouTube block. As you can see, there seem to be some conflicts, height for placeholder div is not calculated properly (is 0px), so the video is not visible.
-
This reply was modified 3 years, 3 months ago by
Tina.
I think there’s an issue with your html structure, because if I look in Complianz safe mode:
https://relaunch.medien-weiter-bildung.de/testbeitrag-videos/?cmplz_safe_mode
I can see the second video actually has a height of 0px, so is not visible. The placeholder just copies this behaviour.
As for the placeholder image: the original image downloaded from youtube:
https://relaunch.medien-weiter-bildung.de/wp-content/uploads/complianz/placeholders/youtube5uWxrjVSXDo-hqdefault.jpg
Has the black bars in it. Maybe you can select a screenshot without the black borders?
As an iframe may have different height/width combinations, the plugin will calculate height and width of the placeholder based on the image size that is downloaded. Then it is adjusted to the width and ratio of the current div container.
As alternative, you can add some custom css to ensure the placeholder never is higher than the height of the video you have set:
.cmplz-blocked-content-container {
height: 310px;
background-position: center;
}
Thread Starter
Tina
(@tinareisweb)
Update for anyone struggling with this:
@rogierlankhorst Your CSS solution didn’t work unfortunately, and I can’t change the HTML because it is the default Youtube embed block in Gutenberg, which I want to make usable for my non-tech savvy editors.
The problem is the default CSS classes WordPress attaches to Youtube embeds. You have to disable the checkbox in block settings “scale for smaller devices”.
Problem is just that then the video doesn’t scale on smaller devices 😉 but I’m working on fixing that and will update here.
Thank you!
