Jetpack: Responsive Videos: does not support Full Width and Wide Width block settings

[jeherve]

Steps to reproduce the issue

1. Enable Twenty Nineteen on your site.
2. In a new post, add some text, and then a new video (e.g. Youtube) on its own line.
3. Pick the wide width setting:
   
4. On the frontend, see that the video is not as wide as the rest of the post content.

When disabling Responsive Videos, the width is fine:

[nosolosw]

For the record, I ran into this issue https://github.com/WordPress/gutenberg/issues/12676

Tried disabling some Jetpack modules but it didn't work. I didn't find how to disable the "Responsive Videos" and the issue went away if I disconnected from Jetpack.

[jasmussen]

To elaborate a little bit here: Gutenberg comes with responsive embed support out of the box.

The _theme_ has to opt in to support these, because often themes themselves provide their own responsive embeds support, and that conflicts with the support that Gutenberg comes with.

Twenty Nineteen opts into gutenberg responsive embeds. But Jetpack is not aware of this, and applies its responsive magic on top of that, which causes the issue reported here. Ideally Jetpack can turn off the responsive embed stuff it does, when it detects that the theme has opted into Gutenberg responsiveness. See more here: https://wordpress.org/gutenberg/handbook/designers-developers/developers/themes/theme-support/#responsive-embedded-content

add_theme_support( 'responsive-embeds' );

[jeherve]

I didn't find how to disable the "Responsive Videos"

Here is how you would go about it:

function jeherve_dont_load_resp( $tools ) {
    $index = array_search( 'theme-tools/responsive-videos.php', $tools );
    if ( false !== $index ) {
        unset( $tools[ $index ] );
    }
    return $tools;
}
add_filter( 'jetpack_tools_to_include', 'jeherve_dont_load_resp' );

Twenty Nineteen opts into gutenberg responsive embeds.

I'll not load Responsive Videos when a theme supports those, I think that would be a first solution. #10880

[dartiss]

Hi @jeherve 👋🏼

I'm experiencing the same problem - embedded YouTube videos on my Twenty Nineteen theme are not responsive at all. You can see an example here - https://artiss.blog/2018/09/overwatch-the-life-of-a-bastion-main/ (video is half way down).

De-activating Jetpack resolves the issue.

The reason I mention is that on my test site I'm running an older version of Jetpack - 6.5 - and it actually works. Is this relevant at all?

[jeherve]

on my test site I'm running an older version of Jetpack - 6.5 - and it actually works. Is this relevant at all?

We've only added Responsive Videos support to Twenty Nineteen (as well as other custom changes to ensure the best compatibility with the new default theme) in the last release, so yes, it is expected that you do not see the problem with older versions of Jetpack.

[flexerd]

I didn't find how to disable the "Responsive Videos"

Here is how you would go about it:

function jeherve_dont_load_resp( $tools ) {
  $index = array_search( 'theme-tools/responsive-videos.php', $tools );
  if ( false !== $index ) {
      unset( $tools[ $index ] );
  }
  return $tools;
}
add_filter( 'jetpack_tools_to_include', 'jeherve_dont_load_resp' );

Twenty Nineteen opts into gutenberg responsive embeds.

I'll not load Responsive Videos when a theme supports those, I think that would be a first solution. #10880

Hi
The code did not work on Jetpack Version 6.8.1 had to disable JP as required full width video.

Any ideas?
Thanks

[jeherve]

@flexerd Could you let me know where and how you inserted that code snippet? Could you try inserting it as explained here?

[flexerd]

@jeherve In functions.php in the child-theme

[jeherve]

@flexerd Could you try as I suggested instead, and let me know how it goes?

[Aurorum]

Enable Twenty Nineteen on your site.

I don't think it just needs to be Twenty Nineteen. I've tested with Photos on WordPress.com which still causes the same issue. Independent Publisher 2, for example, doesn't cause an issue in the post itself but creates a huge space in the editor. Would the fix work for all themes? :)

I've included several screenshots in Automattic/themes#457. Visually, the result seems to look way worse for some reason. I'm fairly sure WordPress.com sites can't disable Responsive Videos either, which causes the bug to be more prevalent over there too.

[jeherve]

I don't think it just needs to be Twenty Nineteen.

That is correct. The problem will apply to all themes that declare support for core responsive embeds (which most of the Automattic themes do). The fix will apply to all those themes.

[supernovia]

Is there any way this could have caused sites that _aren't_ using blocks to display improperly cropped videos?

[jeherve]

Yes, see #11097

[webmandesign]

Hi @jeherve & @jasmussen,

I think you are missing one important usecase here:

The theme may not opt into Gutenberg's responsive embeds and will use Jetpack's responsive videos functionality with fallback to a custom solution (FitVids). The reason for this is that even if we use block editor in WordPress, it is not enabled for all post types, yet the theme has to provide responsive video styles for all content.

For example, a theme needs to provide responsive styles for videos in WooCommerce product content. WooCommerce products are not block editor (Gutenberg) enabled. They can only be edited with classic editor. Our theme has these options:

• Opt into Jetpack responsive videos functionality - this will cause issues in posts written with Gutenberg, so we need to...
• ...opt into Gutenberg responsive embeds - but this will switch off the Jetpack responsive videos altogether, rendering Gutenberg disabled post type's content videos un-responsive, thus the only solution here is...
• ...using a custom solution (FitVids) only - basically, this seems to be the only solution for a theme if it wants to support all WordPress content, rendering Jetpack responsive videos functionality basically obsolete nowadays.

I'm not sure if you can do something about it in Jetpack though. I just posted this as an info in case someone would come across the similar situation.

I personally use FitVids as fallback when Jetpack is not used on the site. Unfortunately, I'm switching to FitVids only solution from now on.

Best regards,

Oliver

[jeherve]

@webmandesign Thanks for the feedback! We ended up going a different route, and disabling Jetpack's Responsive Videos on a case-by-base basis:
https://github.com/Automattic/jetpack/pull/11171

This may be more in line with what you have in mind, but it requires using the classic block instead of the classic editor. Would that be an acceptable solution?

[webmandesign]

@jeherve Thank you for the update! This should work perfectly fine for my future themes and I will definitely test it then. For existing themes I stick with fallback solution for now though. Thanks!