Hueman video embedded and Gutenberg responsive embeds compatibility issue

[eri-trabiccolo]

Reported:
https://wordpress.org/support/topic/display-issue-with-youtube-embedded-video-in-gutenberg-3-9-0-edited-post/#post-10717626

https://secure.helpscout.net/conversation/670216960/165331/?folderId=607544
WordPress/gutenberg#9500 (comment)

As far as I can see, when you embed a video with Gutenberg, it (Gutenberg) adds some CSS classes to the block html element in front that will make the video responsive:
wp-has-aspect-ratio wp-embed-aspect-16-9
This value is the default value for the Block -> Advanced Additional CSS Class:

Gutenberg video block HTML is of the type:

<figure class="wp-block-embed-youtube wp-block-embed is-type-video is-provider-youtube wp-has-aspect-ratio wp-embed-aspect-16-9">
    <div class="wp-block-embed__wrapper">
        <iframe width="500" height="281" src="https://www.youtube.com/embed/XXX?feature=oembed&amp;wmode=opaque" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen=""></iframe>
     </div>
</figure>

and the relevant CSS:

.wp-block-embed.wp-embed-aspect-1-1 .wp-block-embed__wrapper, .wp-block-embed.wp-embed-aspect-1-2 .wp-block-embed__wrapper, .wp-block-embed.wp-embed-aspect-4-3 .wp-block-embed__wrapper, .wp-block-embed.wp-embed-aspect-9-16 .wp-block-embed__wrapper, .wp-block-embed.wp-embed-aspect-16-9 .wp-block-embed__wrapper, .wp-block-embed.wp-embed-aspect-18-9 .wp-block-embed__wrapper, .wp-block-embed.wp-embed-aspect-21-9 .wp-block-embed__wrapper {
    position: relative;
}

.wp-block-embed.wp-embed-aspect-1-1 .wp-block-embed__wrapper:before, .wp-block-embed.wp-embed-aspect-1-2 .wp-block-embed__wrapper:before, .wp-block-embed.wp-embed-aspect-4-3 .wp-block-embed__wrapper:before, .wp-block-embed.wp-embed-aspect-9-16 .wp-block-embed__wrapper:before, .wp-block-embed.wp-embed-aspect-16-9 .wp-block-embed__wrapper:before, .wp-block-embed.wp-embed-aspect-18-9 .wp-block-embed__wrapper:before, .wp-block-embed.wp-embed-aspect-21-9 .wp-block-embed__wrapper:before {
    content: "";
    display: block;
    padding-top: 50%;
}
.wp-block-embed.wp-embed-aspect-16-9 .wp-block-embed__wrapper:before {
    padding-top: 56.25%;
}
.wp-block-embed.wp-embed-aspect-1-1 .wp-block-embed__wrapper iframe, .wp-block-embed.wp-embed-aspect-1-2 .wp-block-embed__wrapper iframe, .wp-block-embed.wp-embed-aspect-4-3 .wp-block-embed__wrapper iframe, .wp-block-embed.wp-embed-aspect-9-16 .wp-block-embed__wrapper iframe, .wp-block-embed.wp-embed-aspect-16-9 .wp-block-embed__wrapper iframe, .wp-block-embed.wp-embed-aspect-18-9 .wp-block-embed__wrapper iframe, .wp-block-embed.wp-embed-aspect-21-9 .wp-block-embed__wrapper iframe {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

That we all know what it does:

1. container relatively positioned
2. container with pseudo-element ::before with padding-top expressed in percentage and relatively positioned
3. iframe absolutely positioned and stretched edge-edge into the container

(this is a consolidated technique that we also use e.g. throughout the Customizr theme)

At the same time, Hueman, uses a similar approach to achieve a similar result.
First of all it wraps the video elements (iframe mostly) in a convenient HTML container needed to apply CSS rules responsible of the video responsiveness:
HTML -> https://github.com/presscustomizr/hueman/blob/v3.4.2/functions/init-wp-core-filters.php#L44

The Hueman video embed, with the classic editor, would produce something like:

<div class="video-container">
        <iframe width="500" height="281" src="https://www.youtube.com/embed/XXX?feature=oembed&amp;wmode=opaque" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen=""></iframe>
</div>

CSS:

.video-container {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
}
.video-container embed, .video-container iframe, .video-container object, .video-container video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

BUT Hueman video responsive video with Gutenberg editor would produce an HTML of this type:

<figure class="wp-block-embed-youtube wp-block-embed is-type-video is-provider-youtube wp-has-aspect-ratio wp-embed-aspect-16-9">
	<div class="wp-block-embed__wrapper">
		<div class="video-container">
			<iframe width="500" height="281" src="https://www.youtube.com/embed/65vtObG1hfU?feature=oembed&amp;wmode=opaque" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen=""></iframe>
		</div>
	</div>
</figure>

So here we have:
a .wp-block-embed__wrapper::before element with an aspect ratio of 16:9 and a .video-container with the same aspect ratio sitting below it, as it is relatively positioned, and the video absolutely positioned in the .video-container.

Now given the fact I guess Gutenberg will allow different aspect ratios (achievable by just changing the block additional classes), we should make "our responsive video approach" lose instead of overriding the Gutenberg one.

This can be done either "suspending" the relevant filters added by Hueman when a content has been generated with Gutenberg, or just apply a convenient CSS only in the case the Hueman .video-container is nested into a wp-block-embed with a specific aspect ratio.

I would go with the latter as it's faster and easier.

Meantime we can suggest users to remove the block additional classes, the two of them or just
wp-embed-aspect-16-9