How To Fix “Video outside the viewport” Indexing Issue

In this post I am going to discuss how to fix the “video outside the viewport” indexing issue / error which is starting to appear in GSC.

Rumors online believe that this issue is causing users to lose rank after recent updates.

The Issue.

The issue comes down to the responsiveness of certain themes. The themes are not properly resizing videos when the view-port is reduced as show by the image below half of the video is cut off by the screen size.

The Fix

Here is how to fix the “video outside of viewport issue”.
First take the embed code provided by youtube and surround it by a div as shown in the code below, do not copy the text below as it is using text literals which make < and > render as text instead of code so type it out yourself:

Next add the following CSS to your website:

.responsive-iframe-container {
position: relative;
overflow: hidden;
padding-top: 56.25%; /* 16:9 Aspect Ratio */
}

.responsive-iframe-container iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 0;
}

The video will now resize with the window, fixing the error.