Below, you’ll find a detailed guide on how to add the Ilab Media Tools Shortcode to your WordPress website, including its parameters, examples, and PHP function code. Additionally, we’ll assist you with common issues that might cause the Ilab Media Tools Plugin shortcode not to show or not to work correctly.
Before starting, here is an overview of the Ilab Media Tools Plugin and the shortcodes it provides:
"Media Cloud for Amazon S3, Cloudflare R2, Google Cloud Storage, DigitalOcean Spaces and more is a dynamic plugin that seamlessly integrates your WordPress site with leading cloud storage providers. Boost your site's performance with ilab-media-tools."
- [mux_video]
Ilab Media Tools [mux_video] Shortcode
The ilab-media-tools plugin shortcode, “mux_video”, facilitates the customization of video attributes. It enables autoplay, looping, muting, controls, and inline play. It also accommodates preload settings, player CSS classes, and poster image. The shortcode ensures compatibility with different video formats and provides a responsive video player for WordPress.
Shortcode: [mux_video]
Parameters
Here is a list of all possible mux_video shortcode parameters and attributes:
id– The unique identifier of the video attachmentautoplay– If set to ‘true’, video starts playing automaticallyloop– If set to ‘true’, video will play in a loopmuted– If set to ‘true’, video will start without soundcontrols– If set to ‘false’, video player controls are hiddeninline– If set to ‘true’, video plays inline on mobile devicespreload– Determines how video should be preloaded, accepts ‘auto’, ‘metadata’, or ‘none’
Examples and Usage
Basic example – Display a video by referencing its attachment ID.
[mux_video id=123 /]Advanced examples
Display a video with autoplay enabled. The video will start playing as soon as it’s ready.
[mux_video id=123 autoplay=true /]Display a video that will loop continuously. Once the video finishes playing, it will automatically start over.
[mux_video id=123 loop=true /]Display a video without sound. The video will be muted by default, but users can manually unmute it.
[mux_video id=123 muted=true /]Display a video without controls. The video can only be played or paused by clicking on it directly.
[mux_video id=123 controls=false /]Display a video that can play inline, meaning it won’t automatically go fullscreen on mobile devices.
[mux_video id=123 inline=true /]Display a video with a specific preload behavior. The ‘auto’ value means the video should start downloading as soon as the page loads.
[mux_video id=123 preload='auto' /]PHP Function Code
In case you have difficulties debugging what causing issues with [mux_video] shortcode, check below the related PHP functions code.
Shortcode line:
add_shortcode( "mux_video", [ $this, 'renderShortCode' ] );Shortcode PHP function:
function renderShortCode( $attrs )
{
$attachmentId = $attrs['id'];
if ( empty($attachmentId) || !postIdExists( $attachmentId ) ) {
return '';
}
$meta = wp_get_attachment_metadata( $attachmentId );
$tagAttributeList = [];
if ( arrayPath( $attrs, 'autoplay', 'false' ) !== 'false' ) {
$tagAttributeList[] = 'autoplay';
}
if ( arrayPath( $attrs, 'loop', 'false' ) !== 'false' ) {
$tagAttributeList[] = 'loop';
}
if ( arrayPath( $attrs, 'muted', 'false' ) !== 'false' ) {
$tagAttributeList[] = 'muted';
}
if ( arrayPath( $attrs, 'controls', 'true' ) !== 'false' ) {
$tagAttributeList[] = 'controls';
}
if ( arrayPath( $attrs, 'inline', 'false' ) !== 'false' ) {
$tagAttributeList[] = 'playsInline';
}
$preload = arrayPath( $attrs, 'preload', null );
if ( $preload !== null ) {
$tagAttributeList[] = "preload='{$preload}'";
}
$tagAttributes = implode( ' ', $tagAttributeList );
$classes = "mux-player";
$extras = "";
$asset = MuxAsset::assetForAttachment( $attachmentId );
VideoPlayerTool::enqueuePlayer( is_admin() );
if ( !empty($this->settings->playerCSSClasses) ) {
$classes .= " {$this->settings->playerCSSClasses}";
}
if ( empty($asset) ) {
$width = intval( arrayPath( $meta, 'width', (int) 0 ) );
$height = intval( arrayPath( $meta, 'height', (int) 0 ) );
if ( !empty($width) && !empty($height) ) {
$extras .= " width={$asset->width} height={$asset->height}";
}
} else {
$extras .= " width={$asset->width} height={$asset->height}";
}
$posterUrl = get_the_post_thumbnail_url( $attachmentId, 'full' );
if ( !empty($posterUrl) ) {
$extras .= " poster='{$posterUrl}'";
}
$tag = "<figure><video class='{$classes}' {$extras} {$tagAttributes}>";
if ( empty($asset) ) {
$url = wp_get_attachment_url( $attachmentId );
$mime = arrayPath( $meta, 'mime_type', null );
if ( $mime === 'video/quicktime' ) {
$fileformat = arrayPath( $meta, 'fileformat', null );
if ( !empty($fileformat) && $fileformat === 'mp4' ) {
$mime = 'video/mp4';
}
}
if ( !empty($mime) ) {
$source = "<source src='{$url}' type='{$mime}' />";
} else {
$source = "<source src='{$url}' />";
}
} else {
$url = $asset->videoUrl();
$source = "<source src='{$url}' type='application/x-mpegURL' />";
}
$tag .= $source . '</video></figure>';
return $tag;
}
Code file location:
ilab-media-tools/ilab-media-tools/classes/Tools/Video/Player/VideoPlayerShortcode.phpConclusion
Now that you’ve learned how to embed the Ilab Media Tools Plugin shortcode, understood the parameters, and seen code examples, it’s easy to use and debug any issue that might cause it to ‘not work’. If you still have difficulties with it, don’t hesitate to leave a comment below.
Leave a Reply