Hello ，这里是Jack独立站。

在Google最新的内容要求更新之后，不少网站放了视频的页面在Search Console中都显示了一个“”视频不在视口范围内“的错误。目前网站对这方面的错误似乎还没有一个很好的解决方案。

那么今天我来分享一下我对这个问题的解决方法。

为什么会出现这个问题？

首先，我们来看一下google官方是如何解释这个错误的：

理解这个问题，我们先要理解一下什么叫视口。

网上对视口的解释是：网站的首屏页面。就是可以点进你的网站之后没有进行任何滚动，直接展现的范围。

但是这个解释其实是有些问题。Google这里认为是视口，应该是我们在使用Google Search Console的“测试实际网站“功能时的”屏幕截图“部分展现出来的部分。

如果你的视频不在这部分，就会被提示“视频不在视口范围内”。

一旦出现这个错误，Google会先将你的网页暂时移除索引，直到问题解决。

如何解决

首先，最直接的解决方案就是把视频直接删了。网上有人反馈，将网页中的视频删除，2个小时之后排名就恢复了正常。

当然，这个方法在博客页面可能还行的通，但是如果在产品或者公司介绍页面可能就会影响到转化率了。

以下是我目前使用的解决方案：

对于博客、介绍和网站首页，将视频尽量放在网站的上一部分，确保他们可以出现在Google Search Console 的“屏幕截图”部分。对于有多个视频的页面，只需要将其中一个视频放在网页头部就可以了。

对于产品页面。如果可以选择放置在产品短描述中或者使用一些插件将视频放置在主图中。当然，也可以使用ACF之类的插件，在产品页中放置一产品视频的字段，放置在一个合适的地方。

Note:产品视频现在不能放在“Product description”中了。因为有些主题默认是会折叠产品信息表格，导致视频无法展现的视口中，或者因为产品信息比较多，产品表格在很下面的位置。最终会导致视频在很下面。

视频过高

在给网站插入视频时，我们通常是将视频先放在YouTube上，然后再直接通过链接放置到网站中。

但是，现在有些主题会出现“视频过高”的错误。

对于这个错误，我们有两种解决方案

第一种是不直接粘贴视频链接。而是使用“嵌入”模式。

依次点击分享 -- 嵌入 ，然后我们会得到一串代码，然后再将woocommerce产品的内容模块调整为Text模式，然后直接粘贴即可。

第二种是使用CSS代码，将视频限制到最大1080PX的范围内。只需要在网站的“customize”的“Additional CSS”中粘贴以下CSS代码：

.video-container {
position: relative;
max-width: 1080px;
width: 100%;
padding-bottom: 56.25%;
overflow: hidden;
margin: 0 auto;
}
.video-container iframe,
.video-container embed,
.video-container object {
position: absolute;
top: 0;
left: 0;
width: 100% !important;
height: 100% !important;
}

以上解决方案仅适用于woocommerce网站，对于shopify网站不一定合适。但是解决问题的思路是一样的。