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