Video outside the viewport is a warning message within Google Search Console that your website is not delivering a good user experience. When you see this message, it means that users on mobile (or any device but most likely mobile) will see your embedded video squeeze and go beyond the viewability of their screen. Here are the steps on how to fix this issue.
Video Step-by-Step
I recorded a video highlighting everything in this blog post step by step. You can watch that video of how to fix this video outside the viewport issue.
Check Google Search Console
In the image above, I share how some of my pages have this issue. You can navigate to this area in GSC by following the steps below.
- Open Google Search Console
- Click on Indexing
- Click on Video Pages
- Click on Video Outside the Viewport
Manually Inspect
If you see that you have affected pages, you will see a sample of URLs that have this problem below the bar chart. You can click on any of these pages to get a snapshot of the problem. However, GSC only shows a limited snapshot of the mobile view, so you might not be able to see this problem.
Instead, use a browser (I’m using Microsoft Edge) to manually inspect the page. Right-click on the page that GSC says has the video problem and go to inspect. Next, you want to do a hard refresh (CTRL + Shift + R or Command + Shift + R) while in the inspect view to look at this problem. If the video is too wide for the view, you know you have a problem.
Manually Change the Width of the YouTube Video
My coding skills are weak, so I can’t go into the CSS and write a rule to change the max width size for my elements. Instead, I will need to manually update each of the instances that have this video problem and change the width size. Below is a picture of what that looks like on WordPress, where I’m adjusting the width size to see if it is smaller.
Publish the Change + Run Another Check
After you change the video’s width, you will want to publish that page again with the new size. Return to your browser and run another inspection check with the hard refresh. If the video is no longer wider than the actual mobile device screen, you are all set.
Also, if you only have a handful of pages with this problem, I recommend clearing the cache on your server and then going into incognito on your mobile phone to see if the issue is resolved.
Submit the Change to Google Search Console
Once you are all set, click on validate fix within Google Search Console to force a new check. Running this check takes at least two weeks to come back with a new result. What you are looking for is a 100% clean report, but even fixing most of the issues is a good start. If you still notice that you have problems with your video size, you will need to go back into those pages and see what that is the case. You may have to reduce the width size even more.
Looking for SEO Help?
Google Search Console is a powerful tool to ensure no technical issues with your site. This error message is both a technical problem and a user problem, which means it needs to be addressed. While not a super colossal ranking signal by itself, giving users a bad experience can result in a high bounce rate, which can signal to search engines that your result needs to be better to show.
Below are the services I provide.