Video gallery and Player Shortcode

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

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

Plugin Icon
Video gallery and Player

"Video Gallery and Player is a unique WordPress plugin that allows you to effortlessly create and manage video galleries, and seamlessly integrates an HTML5 video player for superior playback quality."

★★★★✩ (16) Active Installs: 3000+ Tested with: 6.3.2 PHP Version: false
Included Shortcodes:
  • [sp_html5video]

Video gallery and Player [sp_html5video] Shortcode

The “sp_html5video” shortcode from the Html5 Video Gallery Plus Player plugin allows you to display a video gallery on your WordPress site. It fetches videos from specified categories or individual posts, and presents them in a grid layout.

Shortcode: [sp_html5video]

Parameters

Here is a list of all possible sp_html5video shortcode parameters and attributes:

  • limit – sets the maximum number of videos to display.
  • grid – determines the number of video columns in the display.
  • category – filters the videos to display based on their category.
  • post – specifies the particular videos to display by their post IDs.
  • popup_fix – enables or disables the popup fix feature.
  • extra_class – adds extra CSS classes to the video display.
  • className – assigns a custom CSS class to the video display.
  • align – sets the alignment of the video display.

Examples and Usage

Basic example – Display all videos in a single grid without any category filter.

[sp_html5video grid=1]

Advanced examples

Display videos in a grid of 3, limit the number of videos to 5, and filter by a specific category.

[sp_html5video grid=3 limit=5 category="music-videos"]

Display videos in a grid of 2, without any limit, and filter videos by specific ids.

[sp_html5video grid=2 post="1,2,3,4,5"]

Display videos in a grid of 4, limit the number of videos to 10, and align the grid to the center of the page.

[sp_html5video grid=4 limit=10 align="center"]

Display videos in a grid of 2, without any limit, and add extra CSS classes to the grid wrapper.

[sp_html5video grid=2 extra_class="my-class another-class"]

Display videos in a grid of 3, limit the number of videos to 5, filter by a specific category, and prevent the popup from being fixed.

[sp_html5video grid=3 limit=5 category="music-videos" popup_fix="false"]

PHP Function Code

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

Shortcode line:

add_shortcode("sp_html5video", "sp_html5video_shortcode");

Shortcode PHP function:

function sp_html5video_shortcode( $atts, $content = null ) {

	// extract shortcode parameter
	extract(shortcode_atts(array(
				"limit"			=> -1,
				"grid"			=> 1,
				"category"		=> '',
				"post"			=> '',
				"popup_fix"		=> 'false',
				'extra_class'	=> '',
				'className'		=> '',
				'align'			=> '',
	), $atts, 'sp_html5video' ));

	$limit			= wp_html5vp_clean_number( $limit, -1, 'number' );
	$grid			= wp_html5vp_clean_number( $grid, 1 );
	$cat			= ! empty( $category )			? explode( ',', $category ) : '';
	$post_in		= ! empty( $post )				? explode( ',', $post )		: array();
	$popup_fix		= ( $popup_fix == 'true' )		? 'true'					: 'false';
	$align			= ! empty( $align )				? 'align'.$align			: '';
	$extra_class	= $extra_class .' '. $align .' '. $className;
	$extra_class	= wp_html5vp_get_sanitize_html_classes( $extra_class );
	$video_grid 	= wp_html5vp_grid_column( $grid );

	// Popup Configuration
	$popup_conf = compact('popup_fix');

	// Enqueue Script
	wp_enqueue_script( 'wpos-magnific-popup-jquery' );
	wp_enqueue_script( 'wp-html5video-public-js' );

	// Create the Query
	$unique		= wp_html5vp_get_unique();
	$post_type	= 'sp_html5video';
	$orderby	= 'post_date';
	$order		= 'DESC';

	// Post Type Argument 
	$args = array (
				'post_type'			=> $post_type,
				'posts_per_page'	=> $limit,
				'orderby'			=> $orderby, 
				'order'				=> $order,
				'post__in'			=> $post_in,
				'no_found_rows'		=> 1,
			) ;

	// Tax Query
	if( $cat != "" ){
		$args['tax_query'] = array( 
								array(
									'taxonomy'	=> 'video-category', 
									'field'		=> 'tearm_id', 
									'terms'		=> $cat,
								)
		);
	}

	ob_start();

	//Get post type count
	$query		= new WP_Query($args);
	$post_count	= $query->post_count;
	$count		= 1;
	$i			= 1;

	global $post; ?>

	<div class="wp-html5vp-video-row video-row video-row-clearfix <?php echo esc_attr($extra_class); ?>" id="wp-html5vp-<?php echo esc_attr($unique); ?>">
	<?php
	// Displays Custom post info
	if( $post_count > 0 ) :

		// Loop
		while ($query->have_posts()) : $query->the_post();

		$feat_image			= wp_get_attachment_url( get_post_thumbnail_id() );
		$css_wrap			= ( $count % $grid == 1 )	? ' wp-html5vp-first'	: '';
		$wpvideo_video_mp4	= get_post_meta( $post->ID, '_wpvideo_video_mp4', true );
		$wpvideo_video_wbbm	= get_post_meta( $post->ID, '_wpvideo_video_wbbm', true );
		$wpvideo_video_ogg	= get_post_meta( $post->ID, '_wpvideo_video_ogg', true );
		$youtube_link		= get_post_meta( $post->ID, '_wpvideo_video_yt', true );
		$vimeo_link			= get_post_meta( $post->ID, '_wpvideo_video_vm', true );
		$video_link			= '';

		if( $youtube_link != '' ) {
			$video_link = $youtube_link;
		} else {
			$video_link = $vimeo_link;
		} ?>

		<div class="video-wrap html5video-medium-<?php echo esc_attr($video_grid); ?> html5video-columns <?php echo esc_attr($css_wrap); ?>">
			<div class="video_frame">
				<div class="video_image_frame">
					<?php if( $video_link != '' ) { ?>
						<a href="<?php echo esc_url( $video_link ); ?>" class="popup-youtube">
							<?php if( $feat_image ) { ?>
								<img src="<?php echo esc_url( $feat_image ); ?>" alt="<?php the_title(); ?>" />
							<?php } ?>
							<span class="video_icon"></span>
						</a>
					<?php } else { ?>
						<a href="#video-modal-<?php echo esc_attr($unique.'-'.$i); ?>" class="popup-modal">
							<?php if( $feat_image ) { ?>
								<img src="<?php echo esc_url( $feat_image ); ?>" alt="<?php the_title(); ?>" />
							<?php } ?>
							<span class="video_icon"></span>
						</a>
					<?php } ?>
					<div id="video-modal-<?php echo esc_attr($unique.'-'.$i); ?>" class="mfp-hide white-popup-block wp-html5vp-popup-wrp">
						<video id="video_<?php echo get_the_ID(); ?>" class="wp-hvgp-video-frame video-js vjs-default-skin" controls preload="none" width="100%" poster="<?php echo esc_url($feat_image); ?>" data-setup="{}">
							<source src="<?php echo esc_url($wpvideo_video_mp4); ?>" type='video/mp4' />
							<source src="<?php echo esc_url($wpvideo_video_wbbm); ?>" type='video/webm' />
							<source src="<?php echo esc_url($wpvideo_video_ogg); ?>" type='video/ogg' />
						</video>
					</div>
				</div>
				<div class="video_title"><?php the_title(); ?></div>
			</div>
		</div>
		<?php
		$count++;
		$i++;
		endwhile;
	endif; ?>
		<div class="wp-html5vp-popup-conf" data-conf="<?php echo htmlspecialchars(json_encode($popup_conf)); ?>"></div><!-- end of-popup-conf -->
	</div>
	<?php

	// Reset query to prevent conflicts
	wp_reset_postdata();
	return ob_get_clean();
}

Code file location:

html5-videogallery-plus-player/html5-videogallery-plus-player/includes/shortcode/class_shortcode.php

Conclusion

Now that you’ve learned how to embed the Video gallery and Player 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 *