Skip to content

Instantly share code, notes, and snippets.

@webaware
Last active Nov 30, 2022
Embed
What would you like to do?
Replace the HTML for the standard WordPress video shortcode, simplifying it to just a video element without extra wrapping divs, buttons, etc. See blog post https://snippets.webaware.com.au/howto/wordpress-video-in-the-block-editor/
<video class="project-video" controls controlslist="nodownload" playsinline disablePictureInPicture
{%- if video.autoplay %} autoplay muted {%- endif -%}
{%- if video.preload %} preload="{{ video.preload }}" {%- endif -%}
{%- if video.loop %} loop {%- endif -%}
{%- if video.width %} width="{{ video.width }}" {%- endif -%}
{%- if video.height %} height="{{ video.height }}" {%- endif -%}
{%- if video.poster %} poster="{{ video.poster }}" {%- endif -%}
>
{%- for source in video.sources -%}
<source src="{{ source.link }}" type="{{ source.mime_type }}">
{%- endfor -%}
</video>
<?php
namespace project\theme\videos;
use Timber\Timber;
if (!defined('ABSPATH')) {
exit;
}
/**
* replace standard video shortcode output with ours
*/
add_filter('wp_video_shortcode_override', function(string $html, array $attrs) : string {
$video = new VideoItem($attrs);
return Timber::fetch(['shortcodes/video.twig'], ['video' => $video]);
}, 10, 2);
/**
* video item build from a WordPress video shortcode
*/
class VideoItem {
public int $id;
public string $poster;
public string $preload;
public int $width;
public int $height;
public bool $loop;
public bool $autoplay;
public array $sources = [];
public function __construct(array $attrs) {
$this->id = $attrs['id'] ?? 0;
$this->poster = $attrs['poster'] ?? 0;
$this->preload = $attrs['preload'] ?? 'metadata';
$this->width = $attrs['width'] ?? 0;
$this->height = $attrs['height'] ?? 0;
$this->loop = $attrs['loop'] ?? false;
$this->autoplay = $attrs['autoplay'] ?? false;
if (!empty($attrs['webm'])) {
$this->sources[] = [
'mime_type' => 'video/webm; codecs="vp9, opus"',
'link' => $attrs['webm'],
];
}
if (!empty($attrs['mp4'])) {
$this->sources[] = [
'mime_type' => 'video/mp4',
'link' => $attrs['mp4'],
];
}
if (!empty($attrs['ogv'])) {
$this->sources[] = [
'mime_type' => 'video/ogg',
'link' => $attrs['ogv'],
];
}
if (!empty($attrs['m4v'])) {
$this->sources[] = [
'mime_type' => 'video/x-m4v',
'link' => $attrs['m4v'],
];
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment