WordPress Version: 6.1
/**
* Outputs the markup for a video tag to be used in an Underscore template
* when data.model is passed.
*
* @since 3.9.0
*/
function wp_underscore_video_template()
{
$video_types = wp_get_video_extensions();
?>
<# var w_rule = '', classes = [],
w, h, settings = wp.media.view.settings,
isYouTube = isVimeo = false;
if ( ! _.isEmpty( data.model.src ) ) {
isYouTube = data.model.src.match(/youtube|youtu\.be/);
isVimeo = -1 !== data.model.src.indexOf('vimeo');
}
if ( settings.contentWidth && data.model.width >= settings.contentWidth ) {
w = settings.contentWidth;
} else {
w = data.model.width;
}
if ( w !== data.model.width ) {
h = Math.ceil( ( data.model.height * w ) / data.model.width );
} else {
h = data.model.height;
}
if ( w ) {
w_rule = 'width: ' + w + 'px; ';
}
if ( isYouTube ) {
classes.push( 'youtube-video' );
}
if ( isVimeo ) {
classes.push( 'vimeo-video' );
}
#>
<div style="{{ w_rule }}" class="wp-video">
<video controls
class="wp-video-shortcode {{ classes.join( ' ' ) }}"
<# if ( w ) { #>width="{{ w }}"<# } #>
<# if ( h ) { #>height="{{ h }}"<# } #>
<?php
$props = array('poster' => '', 'preload' => 'metadata');
foreach ($props as $key => $value) {
if (empty($value)) {
?>
<#
if ( ! _.isUndefined( data.model.<?php
echo $key;
?> ) && data.model.<?php
echo $key;
?> ) {
#> <?php
echo $key;
?>="{{ data.model.<?php
echo $key;
?> }}"<#
} #>
<?php
} else {
echo $key;
?>
="{{ _.isUndefined( data.model.<?php
echo $key;
?> ) ? '<?php
echo $value;
?>' : data.model.<?php
echo $key;
?> }}"
<?php
}
}
?>
<#
<?php
foreach (array('autoplay', 'loop') as $attr) {
?>
if ( ! _.isUndefined( data.model.<?php
echo $attr;
?> ) && data.model.<?php
echo $attr;
?> ) {
#> <?php
echo $attr;
?><#
}
<?php
}
?>#>
>
<# if ( ! _.isEmpty( data.model.src ) ) {
if ( isYouTube ) { #>
<source src="{{ data.model.src }}" type="video/youtube" />
<# } else if ( isVimeo ) { #>
<source src="{{ data.model.src }}" type="video/vimeo" />
<# } else { #>
<source src="{{ data.model.src }}" type="{{ settings.embedMimes[ data.model.src.split('.').pop() ] }}" />
<# }
} #>
<?php
foreach ($video_types as $type) {
?>
<# if ( data.model.<?php
echo $type;
?> ) { #>
<source src="{{ data.model.<?php
echo $type;
?> }}" type="{{ settings.embedMimes[ '<?php
echo $type;
?>' ] }}" />
<# } #>
<?php
}
?>
{{{ data.model.content }}}
</video>
</div>
<?php
}