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:

View full-size screenshot

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:
View full-size screenshot

Solution

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.

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.