寻小山 WordPress自从更新到古腾堡编辑器之后，功能越来越完善了。记得好几年前寻小山网站上的视频都是通过插件的形式来插入播放器，不仅臃肿还因为插件更新慢的原因，经常使用不了，体验感非常差。现在wordpress对视频的兼容性已经很不错了，页面插入视频的方法也越来越多。
虽然在WordPress文章中插入外链视频是一种常见且实用的内容展示方式，但如果视频宽度不能自动适应文章宽度，可能会造成排版混乱或影响用户体验。寻小山网小编最近在做公司的英文企业站的时候就遇到了这个问题，为了解决这个问题，寻小山下面介绍两种方法让外链视频自适应屏幕宽度。
方法一：使用CSS代码
1、在WordPress主题的 style.css 文件或自定义CSS文件中添加以下代码：
.wp-video { max-width: 100%; height: auto; }
2、将所有要插入的外链视频代码包裹在 <div> 标签中，并添加 wp-video 类。例如：
<div class=“wp-video”> <iframe src=“视频链接“ width=“640” height=“360” frameborder=“0” allowfullscreen></iframe> </div>
方法二：添加Html video标签
在wordpress自定义页面添加自适应视频也可用通过Html <video>标签实现，具体代码如下：
<video controls preload=”auto” poster=”视频封面地址” max width=”100%” max height=”100%” src=”视频地址”></video>
下面来详细了解下video标签及使用方法。
1、什么是video标签？
<video>标签是HTML元素，用于在网页中嵌入视频播放器。它允许您显示来自各种来源的视频内容，包括本地文件、远程URL和流媒体服务。<video>`标签提供了一种将视频纳入网页的标准化方法，确保跨不同浏览器和设备的兼容性。
语法：
<video>标签的基本语法如下：
<video src=“VIDEO_URL” width=“WIDTH” height=“HEIGHT” controls> 您的浏览器不支持视频标签。 </video>
属性：
-
src: 指定要播放的视频文件的URL。这可以是本地文件路径或远程URL。
-
width: 设置视频播放器的宽度（以像素为单位）。
-
height: 设置视频播放器的高度（以像素为单位）。
-
controls: 向视频播放器添加播放控件，例如播放、暂停、音量和全屏按钮。
回退内容：
<video>标签的起始和结束标签之间的文本内容将显示为不支持<video>标签的浏览器的回退内容。此回退内容可以提供视频的简要说明或查看视频的替代说明。
其他属性：
<video>标签支持各种其他属性，可提供对视频播放体验的更多控制。一些常见属性包括：
-
autoplay: 当页面加载时自动启动视频播放。
-
loop: 无限循环播放视频。
-
poster: 指定在视频加载时要显示的图像。
-
muted: 默认情况下使视频播放静音。
-
preload: 指示在播放开始之前应预加载多少视频。
使用<video>标签：
要有效地使用<video>标签，请考虑以下提示：
-
**选择合适的视频格式：**确保您的视频以与主要浏览器和设备兼容的格式编码。常见格式包括 MP4、WebM 和 Ogg。
-
**优化视频大小：**压缩您的视频以减小文件大小而不影响质量。这会改善加载时间并减少带宽使用。
-
**提供回退内容：**为不支持
<video>标签的浏览器提供回退内容。这可确保所有用户都可以访问视频信息。 -
**使用响应式设计：**使视频播放器响应不同屏幕尺寸和设备。使用 CSS 或 JavaScript 技术来实现这一点。
-
**考虑可访问性：**为听力障碍观众添加字幕或转录。为视频中的图像提供替代文本描述。
通过遵循这些准则，您可以使用<video>标签有效地将视频嵌入您的网页中，从而增强用户体验并丰富您的内容。
微信扫一扫打赏