Empty space added when Replace YouTube Iframe with Preview Image feature is enabled

Problem

Large empty space is added above or below the YouTube video iframe when Replace YouTube Iframe with Preview Image feature in the Media tab is enabled. 

Cause

The issue happens when a custom style is applied for the iframe container and it has CSS properties that add spacing to maintain aspect ratio. The values don't encounter for any image placed within the iframe container. When you enable the  Replace YouTube Iframe with Preview Image feature, this spacing is added above or below the preview image.

How to check the CSS of the iframe

Inspect the video iframe element with the developer tools in your browser and check the corresponding CSS declarations as in the screenshot here:

The common CSS declarations that cause the empty space are the following:

• aspect-ratio declaration as in the example above;
• padding values added in percentage as in the example below:

Solutions

• Using standard Gutenberg blocks in WordPress for placing the video.
  The standard Gutenberg blocks in WordPress don't have the aspect ratio CSS declarations. Unless the theme is overwriting it, you should be able to use the YouTube video blocks in WordPress without this issue.
• Avada theme users can set "Video Facade" option to ON in the Avada Builder YouTube video block settings to resolve the problem:

• Contact your theme support to know how to unset these CSS rules. 
  

  For example, in the case shared above, the CSS fix -  provided by Oxygen Theme Support team and specific to Oxygen Theme - is:

  .ct-video > .oxygen-vsb-responsive-video-wrapper {
  padding-bottom:unset!important;
  }
  	

Note: You may need to clear WP Rocket's cache after applying these changes for them to be visible.