WP Video Popup Shortcode

Below, you’ll find a detailed guide on how to add the WP Video Popup 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 WP Video Popup Plugin shortcode not to show or not to work correctly.

Before starting, here is an overview of the WP Video Popup Plugin and the shortcodes it provides:

WP Video Popup – WordPress Video Lightbox for YouTube & Vimeo

"WP Video Popup is a versatile WordPress plugin allowing users to create engaging video lightboxes for YouTube & Vimeo. With its responsive design, it ensures optimal display across all devices."

★★★★✩ (36) Active Installs: 20000+ Tested with: 6.2.3 PHP Version: false

Included Shortcodes:

• [wp-video-popup]

WP Video Popup [wp-video-popup] Shortcode

The responsive-youtube-vimeo-popup plugin shortcode enables the embedding of YouTube and Vimeo videos into a WordPress site. It allows customization of video settings such as mute, start time, related video hiding, and viewport orientation. It parses the video URL, identifies the service, and constructs the embed URL accordingly. It also dynamically resizes landscape videos for optimal viewing and applies filters for additional URL parameters.

Shortcode: [wp-video-popup]

Parameters

Here is a list of all possible wp-video-popup shortcode parameters and attributes:

• video – URL of the YouTube or Vimeo video to be displayed
• mute – if set to 1, the video will play without sound
• start – the time in seconds at which the video starts playing
• hide-related – if set to 1, YouTube related videos will not be displayed
• portrait – if set to 1, the video will be displayed in portrait mode

Examples and Usage

Basic example – Display a YouTube video with default settings

[wp-video-popup video="https://www.youtube.com/embed/YlUKcNNmywk" /]

Advanced examples

Display a YouTube video, mute the sound, and start the video at the 30th second

[wp-video-popup video="https://www.youtube.com/embed/YlUKcNNmywk" mute="1" start="30" /]

Display a Vimeo video in portrait mode, mute the sound, and hide related videos

[wp-video-popup video="https://vimeo.com/123456789" mute="1" hide-related="1" portrait="1" /]

Display a YouTube video in landscape mode, with sound, and start the video at the 30th second

[wp-video-popup video="https://www.youtube.com/embed/YlUKcNNmywk" mute="0" start="30" portrait="0" /]

These examples demonstrate the flexibility of the ‘wp-video-popup’ shortcode. You can customize the video source, sound settings, start time, and display mode to suit your needs.

PHP Function Code

In case you have difficulties debugging what causing issues with [wp-video-popup] shortcode, check below the related PHP functions code.

Shortcode line:

add_shortcode( 'wp-video-popup', 'wp_video_popup_shortcode' );

Shortcode PHP function:

function wp_video_popup_shortcode( $wp_video_popup_atts ) {

	$wp_video_popup_atts = shortcode_atts(
		array(
			'video'        => 'https://www.youtube.com/embed/YlUKcNNmywk',
			'mute'         => 0,
			'start'        => 0,
			'hide-related' => 0,
			'portrait'     => 0,
		),
		$wp_video_popup_atts,
		'wp-video-popup'
	);

	// Shortcode attributes.
	$video        = esc_url( $wp_video_popup_atts['video'] );
	$mute         = $wp_video_popup_atts['mute'] ? 1 : 0;
	$start        = $wp_video_popup_atts['start'];
	$hide_related = $wp_video_popup_atts['hide-related'] ? 1 : 0;
	$viewport     = $wp_video_popup_atts['portrait'] ? 'is-portrait' : 'is-landscape';

	// Parser data.
	$video_type = WP_Video_Popup_Parser::identify_service( $video );
	$video_url  = WP_Video_Popup_Parser::get_embed_url( $video );

	/* Construct Output */

	// Add class to landscape YouTube & Vimeos to dynamically resize them.
	if ( 'is-landscape' === $viewport ) {
		$viewport .= ' is-resizable';
	}

	if ( 'vimeo' === $video_type ) {

		// Mute Vimeo video.
		if ( $mute ) {
			$video_url .= '&muted=1';
		}

	} else {

		// Remove YouTube related videos.
		if ( $hide_related ) {
			$video_url .= '&rel=0';
		}

		// Mute YouTube video.
		if ( $mute ) {
			$video_url .= '&mute=1';
		}

	}

	// Filter to let people add other URL parameters.
	$video_url = apply_filters( 'wp_video_popup', $video_url );

	if ( 'vimeo' === $video_type ) {

		// Start Vimeo video at specific time.
		if ( $start ) {
			$video_url .= '#t=' . $start;
		}

	} else {

		// Start YouTube video at specific time.
		if ( $start ) {
			$video_url .= '&start=' . $start;
		}

	}

	return '
	<div class="wp-video-popup-wrapper">
		<div class="wp-video-popup-close"></div>
		<iframe class="wp-video-popup-video is-hosted ' . $viewport . '" src="" data-wp-video-popup-url="' . esc_url( $video_url ) . '" frameborder="0" allowfullscreen allow="autoplay">
		</iframe>
	</div>
	';

}

Code file location:

responsive-youtube-vimeo-popup/responsive-youtube-vimeo-popup/responsive-youtube-vimeo-popup.php

Conclusion

Now that you’ve learned how to embed the WP Video Popup 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.