Google search console video errors

[EdHarrison]

V18.12 site - Recently I am getting warnings from search console over viewport errors for videos (too tall). These are in the correct place in the product page using the correct format and been fine for years.

No changes have been been made this end so I assume Google may have changed the requirements.

Anyone else started getting this?

[Mike Hughes]

I'm getting a 'Video outside the Viewport' message for one in my wordpress blog but can't see the problem with it.

I think the Video Pages indexing report only started last year and the messages themselves might be new. There's already some advice on how the fix the errors floating around but I haven't really looked into it.

Mike

[EdHarrison]

Thanks Mike I have for now removed the videos it has flagged to avoid any penalties in search but I tried them in various phone / tablet resolutions and saw nothing odd.
The only hint Google gave is too tall.
I might embed one the old way with !!<<@@@>>!! to see if it is related to the iframe.

[brucet]

Hi Ed

I took a look at this in the Swift design, which your site is based on. Unfortunately our test server blocks Google, because we don't want our test sites appearing in its index, so I can't investigate this with Search Console. But I did notice there is a kind of postbox effect when embedding a YouTube video in a product videos tab. The space is wider than the iFrame but doesn't define a height, because the tabs have to allow for an indefinite length of content. Even though the Google code defines both a height and a width for the iFrame, only the height is respected and the width grows to fit the space. This gets adjusted for when the video starts playing, but it means the preview image is too tall for the space.

I don't know if that's what Google is complaining about it but seems similar. It can be fixed by adjusting the dimensions of the iFrame so that the width is the same as the containing Form, and the height is increased in the same proportion. For me, 'iframe width="810" height="475"' looks right visually, ie the video does not change size when it starts to play. It's also still responsive for width on a mobile device. Unfortunately I can't check whether that will satisfy Google Search Console, for the reason mentioned above. And I don't know if it will increase the bandwidth usage of the video due to the larger display size.

Sorry that's an incomplete response but I hope it's useful.

[EdHarrison]

Hi Bruce thanks I will put those sizes in a few and see if Google flags them I'll report back here.
funny enough I used to resize them proportionally the old way to look right on my pages before mobile views were important.

[EdHarrison]

Hi Bruce it seems something still is not right as validation failed again using the new sizes.
I have changed all the videos on the site I can find to the new resolution and refreshed the site, started a new validation just in case.

[MDN]

I have been messing around with this for a while now, for iframe sizing I have:

<iframe class="ytVideoWrapper" width="383" height="215"...

CSS:

.ytVideoWrapper {    aspect-ratio: 16/9;  width: 100%; height:auto;  max-width: 640px;  margin: 0 auto;  display: block;}

Now this allows the video to be responsive and ignores the iframe sizing, setting your max-width to whatever you need it to be, however validation will never work unless the video appears above the fold, for example when you test a URL in Google search console, the screenshot of the page it shows should show the video, if its under that or inside of a tab (as mine mostly are) Google does not see the video as important for the page and tags it as supplementary, so will never pass validation on "Video outside of viewport".