Jetpack VideoPress Shortcode

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:

Plugin Icon
Jetpack VideoPress

"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."

★★★★✩ (6) Active Installs: 4000+ Tested with: 6.2.3 PHP Version: 5.6
Included Shortcodes:
  • [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 pixels
  • h – sets the height of the video player in pixels
  • at – defines the initial seek time in seconds
  • loop – if set to true, the video will loop continuously
  • autoplay – if set to true, the video will play automatically on load
  • cover – if set to true, the video will scale to its container
  • muted – if set to true, the video will start without sound
  • controls – if set to true, the video player will display controls
  • playsinline – if set to true, the video can play inline on browsers that support this
  • useaveragecolor – if set to true, the seekbar will use the automatic average color
  • preloadcontent – 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.

Comments

Leave a Reply

Your email address will not be published. Required fields are marked *