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 is a powerful WordPress plugin that integrates your site with Amazon S3, Cloudflare R2, Google Cloud Storage, DigitalOcean Spaces and more. Manage and streamline your media effortlessly with ilab-media-tools."
- [mux_video]
Ilab Media Tools [mux_video] Shortcode
The ilab-media-tools shortcode, “mux_video”, is designed to embed a video player in your WordPress site. It takes video file attributes such as ‘autoplay’, ‘loop’, ‘muted’, ‘controls’, ‘inline’, and ‘preload’ to customize the video player’s behavior. The shortcode also adjusts the video dimensions based on the input or the attached file metadata. It supports different video formats and uses the post’s thumbnail as a poster image.
Shortcode: [mux_video]
Parameters
Here is a list of all possible mux_video shortcode parameters and attributes:
id– Unique identifier for the video attachment.autoplay– If set to true, the video will start playing automatically.loop– If set to true, the video will loop continuously.muted– If set to true, the video will play without sound.controls– If set to true, the video player will show control options.inline– If set to true, the video will play inline on the page.preload– Defines the video’s loading behavior. Possible values: ‘auto’, ‘metadata’, ‘none’.
Examples and Usage
Basic example – Display a video using the ‘mux_video’ shortcode by referencing the ID of the video attachment.
[mux_video id=123 /]Advanced examples
Display a video with autoplay, loop, and muted attributes set to true. The video will start playing automatically, will loop continuously, and will be muted.
[mux_video id=123 autoplay=true loop=true muted=true /]Display a video with controls and inline attributes set to true. The video will have player controls and will play inline on the webpage instead of a new window or full-screen.
[mux_video id=123 controls=true inline=true /]Display a video with a specific preload setting. The video will start buffering as soon as the page loads, improving the playback experience.
[mux_video id=123 preload=auto /]These examples demonstrate how you can customize the video playback experience using the ‘mux_video’ shortcode and various parameters. Be sure to replace ‘123’ with the ID of your video attachment.
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