To troubleshoot video outside the Viewport errors as shown in Google Search Console Video Page Indexing reports. All you need to do is identify the video area on the page, and then move the video so that the entire video is inside the renderable area of the web page and seen when the page loads.
Video Tutorial Showing How-To Fix Video Outside the Viewport
Steps for Fixing Video Outside the Viewport Errors
Step 1 Inspect Example URL
Step 2 Test Live URL
Step 3 View Tested Page Inspect Screenshot
If Tested Page Screenshot Does Not Show Video Area
Use Chrome Web Developer Toolbar (Press F12 on your keyboard) and Emulate Device Basically, once you identify what area of the web page is not responding on different viewport settings, then, it is just matter of styling the web page area so that the video is rendered within that area.
How to Make iframe Responsive
- Step 1 > create a div and wrap the iframe within a div and style the div
- Step 2 > style the position of the actual HTML iframe element
<div style="padding-bottom:56.25%; position:relative; width: 100%; display:block">
<iframe title="VIDEOTITLE" width="100%" height="100%" src="VIDEOURL" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen="" style="position:absolute; top:0; left: 0"></iframe>
What Exactly is The Issue?
That is how you meant to fix video that are outside the viewport, simply ensure the video is within the content area on all devices.