How-To Fix Video Outside the Viewport

how to fix page indexing errors

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

troubleshoot Video Outside the Viewport issues step 1 inspect video URL

Step 2 Test Live URL

Test Live URL

Step 3 View Tested Page Inspect Screenshot

Inspect Screenshot of Tested URL in Search Console

If Tested Page Screenshot Does Not Show Video Area

Use Chrome Web Developer Toolbar (Press F12 on your keyboard) and Emulate Device Chrome Web Developer Toolbar Device Emulator 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

  1. Step 1 > create a div and wrap the iframe within a div and style the div
  2. 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> </div>

What Exactly is The Issue?

video outside viewport example 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.

By RankYa

RankYa digital marketer, website optimizer, content creator, and a fully qualified web developer helping businesses of all sizes achieve greater results online. Based in Melbourne Australia RankYa serves valued clients worldwide by providing personalized services.

We love sharing our proven experience through how to videos and complete courses related to business website marketing, conversion optimization, Google (Search Console, Ads, Analytics, YouTube), SEO, HTML5, Structured Data and WordPress. Thank you for visiting our blog.

9 comments

  1. I am also facing same issue. Video outside the viewport in google search console. I have some 400 videos which faces this issue. Does above CSS solve the problem??

  2. Is there a way to do this using wordpress: appearance > customize > additional CSS?

    In other words, can your fix be done gloably? I have a lot of videos that have this issue and can’t go into each page to solve this.

    1. Hi Paul, I’m sure you can manage to fit the video within the viewport using CSS. Using WordPress Theme > Customizer > Additional CSS try this =

      div.wp-block-embed__wrapper{
      padding-bottom:56.25%;
      position:relative;
      width: 100%;
      display:block
      }
      iframe{
      position:absolute;
      top:0;
      left: 0
      }

      Please do let me know if this fixes your website’s video outside viewport issues. If it does, I would very much appreciate you create a blog post sharing #RankYa #SEO Training Course YouTube link https://www.youtube.com/playlist?list=PLvY3VKvXDMypK-Jg7SFicSQ-b8eWM4VU_ because it compliments your website content.

        1. Hi Paul, I’ve looked at your website, it seems that the viewport issue is fixed, Google search console may take bit time to reflect the updates.

  3. Thank you for sharing such a great tutorial. Though I didn’t come across this issue, may be because I don’t use video in my blog posts. But certainly a great help for seo learners and bloggers like me. I always love reading your blogs and learn something new. I have been following your blog and youtube. Thanks again!

    1. Thanks Hannah for visiting and following RankYa how-to tutorials, we’re glad to have contributed to your learning about search engine optimization and Google Search Console ­čÖé

Questions? Leave a Comment!

Your email address will not be published. Required fields are marked *