Last active
November 30, 2022 02:14
-
-
Save webaware/d9c7e1c0cf4705ead298da66b0a65fc4 to your computer and use it in GitHub Desktop.
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/
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<?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