Broken aspect ratio and stripped attributes with DIVI

[Zodiac1978]

Bug/Problem

The initial aspect ratio is not used if Embed Privacy is active in the DIVI theme/builder. This is true even if the builder is not used, but the theme is active.

Steps to reproduce

1. Use DIVI
2. Embed a YouTube video
3. Install Embed Privacy
4. See the blocked video with wrong aspect ratio, click it to load it.
5. See the even more wrong aspect ratio

Additionally the related video are broken. Used this snippet to change them in DIVI:

if ( ! function_exists( 'dbvideo_html_without_youtube_related_videos' ) ) {
	function dbvideo_html_without_youtube_related_videos( $old_content ) {
		$regex       = preg_quote( 'https://www.youtube.com/embed/', '/' ) . '[a-z0-9_-]+' . preg_quote( '?feature=oembed', '/' );
		$new_content = preg_replace_callback( "/$regex/i", 'dbvideo_url_without_youtube_related_videos', $old_content );
		return apply_filters( 'dbvideo_html_without_youtube_related_videos', $new_content, $old_content );
	}
}
if ( ! function_exists( 'dbvideo_url_without_youtube_related_videos' ) ) {
	function dbvideo_url_without_youtube_related_videos( $match ) {
		$old_url = isset( $match[0] ) ? $match[0] : '';
		$new_url = add_query_arg( 'rel', '0', $old_url );
		return apply_filters( 'dbvideo_url_without_youtube_related_videos', $new_url, $match );
	}
}
add_action( 'the_content', 'dbvideo_html_without_youtube_related_videos', 100 );

Version

1.8.1

Link

https://singingsues.de/2020/08/04/corona-chor-mosaik-million-dreams/

Environment info

WordPress 6.4.3 Embed Privacy 1.8.1 DIVI 4.24.2

Code of Conduct

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

[MatzeKitt]

Unfortunately, I don’t have access to Divi. Is it possible to get access to a testing environment to check the problem there?

[MatzeKitt]

I could fix the aspect ratio issue.

Regarding the broken videos: Can you share the exact URL you’ve entered into Divi? With a default URL, I couldn’t see any issue here.

[Zodiac1978]

With "broken" I mean adding the ?rel=0 is not working. The snippet tries to filter the_content with adding ?rel=0 to the YT URL, but with Embed Privacy it does not work.

You need to paste the snippet in your functions.php or custom code solution (or plugin, whatever). After adding it, the YT video should display only related videos from the same channel.

[MatzeKitt]

Ah, now I get it. That’s because Embed Privacy needs to change the output of the video. It is then part of escaped JSON content.

So this URL: https://www.youtube.com/watch?v=yqouc9q_ikQ

Becomes this: https:\\/\\/www.youtube-nocookie.com\\/embed\\/yqouc9q_ikQ?feature=oembed

If you adjust your regular expression accordingly, this should work just fine. Alternatively, you could use the filter et_builder_get_oembed for Divi specific things or embed_oembed_html for regular embeds. I will close this issue since this works as intended.

[Zodiac1978]

The overlay is now showing the correct aspect ratio, but the video still shows the wrong one after it is loaded. :(

[MatzeKitt]

Can you share a link where this problem occurs, please? On the one mentioned in your initial comment I can’t see any implementation of Embed Privacy.

[Zodiac1978]

Yes, I've disabled the plugin again because of the broken aspect-ratio.

It is now re-activated, so you can see the problem.

[MatzeKitt]

Thank you, can you disable it again? Then, I can compare the versions directly.

[Zodiac1978]

It is disabled again!

[MatzeKitt]

Thank you, I could now see the issue and reproduce it locally. I didn’t notice it because it looks quite nice if you have just a single column as I had in my test environment. 😄

[MatzeKitt]

It should be fixed now. Can you please test and verify that it works for you, too?

Here is the latest build: embed-privacy.zip

Please keep in mind that the overlay has a certain minimum height and also depending on the content length on the overlay the aspect ratio cannot be respected always. So maybe you need to adjust the design a little bit to fit all the content in the container, since you’re using a 3/3-column layout.

[Zodiac1978]

It is working now! Thanks. :)

But ... there is another problem with Divi. You can use a cover image in the video module and this is breaking Embed Privacy (or Embed Privacy is breaking Divi). The click is not handled correctly and the link to "#" is executed, jumping me just to the start of teh page.

[MatzeKitt]

Thanks for the feedback!

I also see the other issue, but it seems to be unfixable for me, since there is nothing I can do to change the behavior of Divi here and Divi requires to find a video element to play, which is not available since the embed overlay has not yet been activated.

And this functionality is wrapped around the video, which means it’s also wrapped around the embed overlay, since Embed Privacy needs to be executed earlier and Divi doesn’t know anything about Embed Privacy.

Thus, maybe it would better to have a generic integration into Divi for such overlays so that also other plugins benefit from it, e.g. consent management tools.