Below, you’ll find a detailed guide on how to add the Jetpack VideoPress 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 Jetpack VideoPress Plugin shortcode not to show or not to work correctly.
Before starting, here is an overview of the Jetpack VideoPress Plugin and the shortcodes it provides:
"Jetpack VideoPress is a versatile WordPress plugin that enhances your multimedia content experience. It provides an efficient platform for uploading, managing, and sharing videos on your website with ease."
- [videopress]
Jetpack VideoPress [videopress] Shortcode
The Jetpack-Videopress shortcode enables the embedding of Videopress videos into WordPress posts. It accepts GUIDs and allows for various video settings. The shortcode generates an iframe for the video, with options for width, height, autoplay, mute, and looping among others. It also ensures the video ID is valid and formats the video player accordingly.
Shortcode: [videopress]
Parameters
Here is a list of all possible videopress shortcode parameters and attributes:
w
– sets the width of the video player in pixelsh
– sets the height of the video player in pixelsat
– defines the initial seek time in secondsloop
– if set to true, the video will loop continuouslyautoplay
– if set to true, the video will play automatically on loadcover
– if set to true, the video will scale to its containermuted
– if set to true, the video will start without soundcontrols
– if set to true, the video player will display controlsplaysinline
– if set to true, the video can play inline on browsers that support thisuseaveragecolor
– if set to true, the seekbar will use the automatic average colorpreloadcontent
– sets the preload preference for the video (‘metadata’ by default)
Examples and Usage
Basic example – Display a VideoPress video by referencing its GUID (Globally Unique Identifier).
[videopress GUID]
Advanced examples
Display a VideoPress video with a custom width of 800 pixels.
[videopress GUID w=800]
Display a VideoPress video with autoplay enabled and loop set to true. The video will start playing automatically as soon as it loads and will loop continuously.
[videopress GUID autoplay=true loop=true]
Display a VideoPress video muted, without controls, and with a custom width and height. This will create a silent video player without any control options.
[videopress GUID muted=true controls=false w=800 h=450]
Display a VideoPress video with a seek time of 30 seconds. The video will start playing from the 30th second.
[videopress GUID at=30]
Note: Replace ‘GUID’ with the actual GUID of your VideoPress video.
PHP Function Code
In case you have difficulties debugging what causing issues with [videopress]
shortcode, check below the related PHP functions code.
Shortcode line:
add_shortcode( 'videopress', array( static::class, 'videopress_embed_shortcode' ) );
Shortcode PHP function:
function videopress_embed_shortcode( $atts ) {
/**
* We only accept GUIDs as a first unnamed argument.
*/
$guid = isset( $atts[0] ) ? $atts[0] : null;
/**
* Make sure the GUID passed in matches how actual GUIDs are formatted.
*/
if ( ! videopress_is_valid_guid( $guid ) ) {
return '<!-- error: missing or invalid VideoPress video ID -->';
}
/**
* Set the defaults
*/
$defaults = array(
'w' => 640, // Width of the video player, in pixels
'h' => 0, // Height of the video player, in pixels
'at' => 0, // How many seconds in to initially seek to
'loop' => false, // Whether to loop the video repeatedly
'autoplay' => false, // Whether to autoplay the video on load
'cover' => true, // Whether to scale the video to its container
'muted' => false, // Whether the video should start without sound
'controls' => true, // Whether the video should display controls
'playsinline' => false, // Whether the video should be allowed to play inline (for browsers that support this)
'useaveragecolor' => false, // Whether the video should use the seekbar automatic average color
'preloadcontent' => 'metadata',
);
// Make sure "false" will be actually false.
foreach ( $atts as $key => $value ) {
if ( is_string( $value ) && 'false' === strtolower( $value ) ) {
$atts[ $key ] = 0;
}
}
if ( isset( $atts['preload'] ) ) {
$atts['preloadcontent'] = $atts['preload'];
}
$atts = shortcode_atts( $defaults, $atts, 'videopress' );
$base_url = 'https://videopress.com/embed/' . $guid;
$query_params = array(
'at' => $atts['at'],
'loop' => $atts['loop'],
'autoplay' => $atts['autoplay'],
'muted' => $atts['muted'],
'controls' => $atts['controls'],
'playsinline' => $atts['playsinline'],
'useAverageColor' => $atts['useaveragecolor'], // The casing is intentional, shortcode params are lowercase, but player expects useAverageColor
'preloadContent' => $atts['preloadcontent'], // The casing is intentional, shortcode params are lowercase, but player expects preloadContent
);
$src = esc_url( add_query_arg( $query_params, $base_url ) );
$width = absint( $atts['w'] );
if ( ! $atts['h'] ) {
$aspect_ratio = 16 / 9; // TODO: Get the correct aspect ratio for the video.
$height = $width / $aspect_ratio;
} else {
$height = absint( $atts['h'] );
}
$cover = $atts['cover'] ? ' data-resize-to-parent="true"' : '';
$block_template =
'<figure class="wp-block-videopress-video wp-block-jetpack-videopress jetpack-videopress-player">' .
'<div class="jetpack-videopress-player__wrapper">' .
'<iframe ' .
'title="' . __( 'VideoPress Video Player', 'jetpack-videopress-pkg' ) . '" ' .
'aria-label="' . __( 'VideoPress Video Player', 'jetpack-videopress-pkg' ) . '" ' .
'src="%s" ' .
'width="%s"' .
'height="%s" ' .
'frameborder="0" ' .
'allowfullscreen%s allow="clipboard-write">' .
'</iframe>' .
'</div>' .
'</figure>';
$version = Package_Version::PACKAGE_VERSION;
wp_enqueue_script( 'videopress-iframe', 'https://videopress.com/videopress-iframe.js', array(), $version, true );
return sprintf( $block_template, $src, $width, $height, $cover );
}
Code file location:
jetpack-videopress/jetpack-videopress/jetpack_vendor/automattic/jetpack-videopress/src/class-block-editor-content.php
Conclusion
Now that you’ve learned how to embed the Jetpack VideoPress 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