How to fix the error Video Outside the Viewport?

In this article, we will look at how to fix this problem and improve the indexing of your video content in Google Search Console.

1.Identifying the Problem

It’s important to identify the pages impacted by the “Video Outside the Viewport” error before beginning the fix. Use Google Search Console to find URLs that have video display-related indexing problems.

1. Access Google Search Console:
   • Open your web browser and go to Google Search Console .
2. Select Your Property:
   • Choose the property website for which you are experiencing the Video Outside the Viewport issue.
3. Navigate to the Pages Report:
   • In the left-hand menu, click on Pages under the index section.
4. Identify Affected URLs:
   • Review the list of URLs with issues. Look for entries related to the Video Outside the Viewport error.
5. Inspect URL:
   • Click on a specific URL with the error to inspect it further.
6. Check URL Inspection Tool:
   • In the top menu, click on URL Inspection. This tool provides detailed information about the specific URL.

2.Testing and Inspection

1. Open Live URL in Browser:
   • Copy the URL of the page you inspected in Step 1 and open it in your web browser.
2. Check Video Positioning:
   • Ensure that the video on the live page is positioned correctly within the viewport. Look for any irregularities or issues with how the video is displayed.
3. Use Browser Developer Tools:
   • Right-click on the video element and select Inspect or use browser developer tools usually accessible by pressing F12. Check for any CSS or layout issues affecting the video’s positioning.
4. Adjustments and Testing:
   • If you identify any issues, consider making adjustments to the HTML or CSS related to the video positioning. After making changes, refresh the page and re-test to see if the problem is resolved.
5. Mobile Responsiveness:
   • Test the live URL on different devices to ensure the video displays correctly across various screen sizes.
6. Document Findings:
   • Take notes on any changes made or issues identified during the testing process. This documentation will be useful for the next steps in resolving the problem.

3.Making iframe Responsive:

To address the Video Outside the Viewport issue and ensure responsiveness, follow these steps:

1. Create a div and wrap the iframe within it, styling the div.
   • <div style=”padding-bottom:56.25%; position:relative; width: 100%; display:block”> <iframe title=”Your video title” width=”100%” height=”100%” src=”Your video Link” frameborder=”0″ allow=”accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share” allowfullscreen=”” style=”position:absolute; top:0; left: 0″></iframe> </div>
2. Follow-Up and Feedback:
   • After implementing the fix, revisit Google Search Console and fetch and render the affected pages. Confirm that the changes are recognized. Encourage user feedback to identify any lingering issues.

Conclusion

By systematically addressing the “Video Outside the Viewport” issue, you can optimize the indexing of your video pages in Google Search Console. Test thoroughly, apply fixes globally when necessary, and proactively maintain optimal video display for improved SEO. Share your experiences and solutions to contribute to the collective knowledge of the SEO community.