WordPress网站响应式视频教程
响应式视频是指视频根据屏幕的宽度自动调整大小,同时仍然保持其原始的视频宽高比。
响应式设计不仅能改善用户在移动设备上的体验,还能提高客户转化率,降低网站跳出率。这是因为响应式网站通常在不同的设备上提供更一致的体验。响应式内容同时也有助于网站的SEO。
这个简短的教程将向你展示如何使用几行CSS使YouTube, Vimeo和其他视频在你的WordPress网站上变成响应式的, 不需要任何插件。
第一步: 获得YouTube视频的嵌入代码
- 访问YouTube
- 选择想要用在你的网站的视频
- 选择分享=>嵌入=>复制



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

<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代码 => 发布



现在你的视频应该时响应式的了, 可以通过调节浏览器的大小来测试以下。
这个方法同样适用于Vimeo视频和任何其他使用iframe标记的服务。