Gutenberg Responsive Video Embed Fix

After looking at our search console report we realized that some of our videos were not responsive and were larger than the content area on mobile.

Mobile-Friendly Gutenberg Video Embeds

We looked into it and realized that when we converted from the old editor to gutenberg blocks that the embed code wasn’t properly converted to the youtube embed

Here is what we did to fix the issue:

First: Add responsive embeds support to your theme

After doing some research I found that it is a good idea to add responsive embed theme support by adding to your sub-themes functions.php file

add_theme_support( 'responsive-embeds' );

Second: Rework your Video Embed

In the editor, copy the url address of the embedded video and paste into a new block. Then delete the old embed.

Step 1: Copy the YouTube URL out of the embed tag
Step 2: Paste the URL of the video into your post into a new block.
Step 3: Delete the old block

Congratulations, your responsive video problem is fixed!