WordPress网站响应式视频教程

响应式视频是指视频根据屏幕的宽度自动调整大小,同时仍然保持其原始的视频宽高比。

响应式设计不仅能改善用户在移动设备上的体验,还能提高客户转化率,降低网站跳出率。这是因为响应式网站通常在不同的设备上提供更一致的体验。响应式内容同时也有助于网站的SEO。

这个简短的教程将向你展示如何使用几行CSS使YouTube, Vimeo和其他视频在你的WordPress网站上变成响应式的, 不需要任何插件。

第一步: 获得YouTube视频的嵌入代码

  • 访问YouTube
  • 选择想要用在你的网站的视频
  • 选择分享=>嵌入=>复制
复制YouTube视频嵌入代码步骤1
复制YouTube视频嵌入代码步骤2
复制YouTube视频嵌入代码步骤3

第二步: 粘贴嵌入代码

通过自定义HTML, 把之前复制的嵌入代码粘贴到你的网站上。

粘贴自定义HTML代码到WordPress
<iframe width="560" height="315" src="https://www.youtube.com/embed/4V0e9IpzSfs" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

第三步: 修改嵌入代码

在嵌入代码前后分别加入 div class=”video-responsive” 和 /div

<div class="video-responsive">
<iframe width="560" height="315" src="https://www.youtube.com/embed/4V0e9IpzSfs" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>

第四步: 添加CSS

将以下的CSS代码粘贴到WordPress的样式表文件中

.video-responsive{
    overflow:hidden;
    padding-bottom:56.25%;
    position:relative;
    height:0;
}
.video-responsive iframe{
    left:0;
    top:0;
    height:100%;
    width:100%;
    position:absolute;
}

外观 => 自定义 => 额外CSS => 粘贴CSS代码 => 发布

添加CSS代码带WordPress步骤1
添加CSS代码带WordPress步骤2
添加CSS代码带WordPress步骤3

现在你的视频应该时响应式的了, 可以通过调节浏览器的大小来测试以下。

这个方法同样适用于Vimeo视频和任何其他使用iframe标记的服务。

Leave a Reply

Your email address will not be published.