如何自定义WordPress的默认视频输出

当我们将视频地址直接贴入WordPress文章中的时候,WordPress默认会添加video标签,但会设定固定的宽高,无法自适应,同时也没有兼容各端的考虑。实际使用的时候我们需要重新定制。

废话不多说,以下是代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
add_filter('wp_video_shortcode',function($output, $atts){
if(is_array($atts) && isset($atts['src']) && !empty($atts['src'])) {
$url=$atts['src'];
$output='<div class="entry-video">';
$output.='<video
style="object-fit:fill"
webkit-playsinline
playsinline
x5-video-player-type="h5"
x5-video-player-fullscreen="true"
x5-video-orientation="portraint"
preload="auto"
muted
crossorigin="anonymous"
src="'.$url.'"></video>';
$output.='</div>';
}
return $output;
},10,2);

通过wp_video_shortcode的filter勾子,重新输出想要的html代码来替代WordPress原本的output,然后根据需要在css中对entry-video定义自适应的代码即可。例如:

1
2
3
.entry-video video {
max-width: 100%;
}