让代码更简单

当前位置:代码狗 > WordPress > WP建站 > 正文

WordPress插入视频短代码[video]使用详解

重要:本文最后更新于2020-03-14 09:05:43,某些文章具有时效性,若有错误或已失效,请在下方留言或联系代码狗

WordPress怎么插入视频?WordPress文章怎么插入在线播放视频?插入的视频大小怎么控制?视频自动播放和循环播放又怎么设置?这篇WordPress插入视频短代码<video>使用详解解开你的疑惑。([ ]会被解析,换成<>以便显示)

很多人在用WordPress写文章的时候想插入一个视频,于是就去找各种各样的插件,其实WordPress默认支持插入视频的。下面我们一起看看WordPress插入视频原理。

WordPress插入视频原理

WordPress文章插入视频是通过<video>标签实现的。在可视化编辑器中单独一行输入视频地址,WordPress会自动为你转换为<video>标签,切换到文本编辑器中可以看到。通过wordpress插入视频一文中我们知道了函数,大家仔细阅读就会发现其支持短代码插入,短代码属性就是这个函数支持的属性,具体查看这篇文章WordPress插入视频短代码函数wp_video_shortcode详解.

WordPress插入视频实例

可视化自动插入视频

这种方式我就不多讲了,完全靠WordPress自动执行,没难度,只需要你会复制粘贴就行了。

短代码插入视频

这种方式可以控制更多属性,比如视频的宽度、自动播放等。使用如下代码插入一个宽度为800px,高度为600px的视频。(自行将<>换成[ ])

<video src="视频地址" width="800px" height="600px"></video>

更多可控属性请查看这篇文章:WordPress插入视频短代码函数wp_video_shortcode详解

HTML标签插入视频

WordPress文章中是可以插入HTML标签的,因此我们可以直接手动书写<video>标签来实现播放视频,我这里就不多讲实现过程,具体代码可以自己查一下资料,很简单,就一行。

如何调整插入视频样式

阅读了函数的源码后,我们发现,WordPress会创建一个div包裹video标签,其宽度与高度值分别是短代码video的width与height属性值。如果不写,将默认宽度640px高度360px。注意:无论你写百分比还是像素值,最终都会显示成像素值。如果你想在WordPress文章中调整视频宽度或者位置。你可以选择上述第三种方式,手动编写HTML与css以实现想要的样式,比如,下面的代码将为视频设置居中自适应样式。

<div style="text-align: center;">
    <video src="https://caiyun-hz1.oss-cn-hangzhou.aliyuncs.com/video/open-education-silent-valid.mp4" controls="controls" width="100%" height="100%">
</video></div>

感觉很棒!可以赞赏支持我哟~

赞(0) 打赏

评论 抢沙发

×

请作者吃根烤肠!

支付宝