Simple YouTube Responsive Shortcode

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

Before starting, here is an overview of the Simple YouTube Responsive Plugin and the shortcodes it provides:

Plugin Icon
Simple YouTube Responsive

"Simple YouTube Responsive is a WordPress plugin that seamlessly optimizes your YouTube videos for various screen sizes, ensuring a perfect viewer experience every time."

★★★★★ (11) Active Installs: 3000+ Tested with: 6.2.3 PHP Version: false
Included Shortcodes:
  • [youtube]

Simple YouTube Responsive [youtube] Shortcode

The Simple-Youtube-Responsive plugin shortcode allows you to embed a responsive YouTube video on your website. It offers various customization options such as video ID, start and end time, autoplay, loop, and more.

Shortcode: [youtube]

Parameters

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

  • v – Defines the YouTube video id or URL.
  • video – Alternative way to define the YouTube video id or URL.
  • id – A unique identifier for the YouTube video.
  • style – Allows you to add custom CSS styles to the video.
  • start – Sets the start time of the video in seconds.
  • end – Sets the end time of the video in seconds.
  • param – Allows you to add custom parameters to the video.
  • thumb – Sets the thumbnail image of the video.
  • controls – Determines whether to display video controls or not.
  • lazyload – Enables or disables the lazy loading of the video.
  • maxwidth – Sets the maximum width of the video.
  • ratio – Defines the aspect ratio of the video.
  • center – Determines whether to center the video or not.
  • autoplay – Determines whether the video should autoplay or not.
  • loop – Determines whether the video should loop or not.
  • allowfullscreen – Determines whether to allow fullscreen mode or not.
  • class – Allows you to add custom CSS classes to the video.
  • imgq – Sets the image quality of the video thumbnail.

Examples and Usage

Basic example – Embed a YouTube video using its video ID.

[youtube v="dQw4w9WgXcQ" /]

Advanced examples

Embed a YouTube video with custom width, ratio, and autoplay enabled.

[youtube v="dQw4w9WgXcQ" maxwidth="800px" ratio="4:3" autoplay="true" /]

Embed a YouTube video with a custom thumbnail, start time, and end time.

[youtube v="dQw4w9WgXcQ" thumb="https://example.com/custom-thumbnail.jpg" start="30" end="120" /]

Embed a YouTube video with custom CSS classes and disable fullscreen.

[youtube v="dQw4w9WgXcQ" class="custom-class another-class" allowfullscreen="false" /]

Embed a YouTube video with lazy loading enabled and a custom image quality for the thumbnail.

[youtube v="dQw4w9WgXcQ" lazyload="true" imgq="maxresdefault" /]

PHP Function Code

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

Shortcode line:

add_shortcode( 'youtube', 'eirudo_ytresponsive' );

Shortcode PHP function:

                    function eirudo_ytresponsive( $a ) {
	$html = '';
	$uniqid = uniqid();
	$erdyt_options = $GLOBALS['erdyt_options'];
	
	$atts = shortcode_atts( array(
		'v' => '',
		'video' => '',
		'id' => '',
  		'style' => '',
		'start' => '',
		'end' => '',
		'param' => '',
		'thumb' => '',
		'controls' => '',
		'lazyload' => $erdyt_options['lazyload'],
		'maxwidth' => $erdyt_options['maxwidth'],
		'ratio' => $erdyt_options['ratio'],
		'center' => $erdyt_options['centered'],
		'autoplay' => $erdyt_options['autoplay'],
		'loop' => $erdyt_options['loop'],
		'allowfullscreen' => $erdyt_options['allowfullscreen'],
		'class' => $erdyt_options['classes'],
		'imgq' => $erdyt_options['thumb'],
	), $a );
	
	// Sanitize allow
	$videoId			= ( !empty( $atts['video'] ) ) ? esc_attr( $atts['video'] ) : '';
	$videoId			= ( !empty( $atts['v'] ) ) ? esc_attr( $atts['v'] ) : ''; // Overwrite if using v instead
	
	// If video ID is empty, skip to return empty output 
	
	if( !empty( $videoId ) ){
		
		$divId				= ( !empty( $atts['id'] ) ) ? esc_attr( $atts['id'] ) : 'erdyt-' . $uniqid;
		$divClasses			= ( !empty( $atts['class'] ) ) ? ' '.esc_attr( $atts['class'] ) : '';
		$ratio				= ( !empty( $atts['ratio'] ) ) ? esc_attr( $atts['ratio'] ) : '16:9';
		$maxWidth			= ( !empty( $atts['maxwidth'] ) ) ? 'max-width:'.esc_attr( $atts['maxwidth'] ).';' : '';
		$centered			= ( !empty( $atts['center'] ) ) ? eirudo_ytrp_stringtobool(esc_attr( $atts['center'] )) : false;
		$centered			= $centered ? 'margin-left:auto;margin-right:auto;' : '';
		$style				= ( !empty( $atts['style'] ) ) ? esc_attr( $atts['style'] ) : '';
		
		$lazyload			= ( !empty( $atts['lazyload'] ) ) ? eirudo_ytrp_stringtobool( esc_attr( $atts['lazyload'] ) ) : false;
		$imgThumb			= ( !empty( $atts['thumb'] ) ) ? esc_url( esc_attr( $atts['thumb'] ) ) : false;
		$imgQuality			= ( !empty( $atts['imgq'] ) ) ? esc_attr( $atts['imgq'] ) : 'hqdefault';
		
		$params				= ( !empty( $atts['param'] ) ) ? esc_attr( $atts['param'] ) : false;
		$playStart			= ( !empty( $atts['start'] ) ) ? esc_attr( $atts['start'] ) :false;
		$playEnd			= ( !empty( $atts['end'] ) ) ? esc_attr( $atts['end'] ) : false;
		$loop				= ( !empty( $atts['loop'] ) ) ? eirudo_ytrp_stringtobool( esc_attr( $atts['loop'] ) ) : true;
		$autoPlay			= ( !empty( $atts['autoplay'] ) ) ? eirudo_ytrp_stringtobool( esc_attr( $atts['autoplay'] ) ) : false;
		$allowFullscreen	= ( !empty( $atts['allowfullscreen'] ) ) ? eirudo_ytrp_stringtobool( esc_attr( $atts['allowfullscreen'] ) ) : true;
		$controls			= ( !empty( $atts['controls'] ) ) ? eirudo_ytrp_stringtobool( esc_attr( $atts['controls'] ) ) : true;
		
		// Since it's lazyload, autoplay is true
		if( $lazyload ){
			$autoPlay = true;
		}

		// Ratio generator
		$ratio = explode( ':', $ratio );
			$ratioX = floatval( $ratio[0] );
			$ratioY = floatval( $ratio[1] );
			$setRatio = ( floatval($ratioY) / floatval($ratioX) ) * 100;
			$cssRatio = 'padding-bottom:' . $setRatio . '%;';
			
		//CSS 
		$divStyle = 'display:block;position:relative;clear:both;width:100%;' . $maxWidth . $centered . $style;


		// Combine values
		$paramArray = array();
		
		// If custom params, insert to array
		if( $params ){
			$params = strtolower( $params );
			$params = explode( '&', $params );
			
			// Fix to int-value params while converting boolean value to int
			foreach( $params as $i => $p ){
				$pTemp = explode( '=', $p);
				$paramArray[$pTemp[0]] = $pTemp[1];
			}
		}
		
		// Override params from attribute 
		if($playStart){ $paramArray['start'] = $playStart; }
		if($playEnd){ $paramArray['end'] = $playEnd; }
		if($loop){ $paramArray['loop'] = $loop; }
		if($autoPlay){ $paramArray['autoplay'] = $autoPlay; }
		if(!$allowFullscreen){ $paramArray['fs'] = $allowFullscreen; }
		if(!$controls){ $paramArray['controls'] = $controls; }
		
		// Set as param format
		$paramsFixed = '';
		foreach( $paramArray as $i => $p ){
			$paramsFixed .= $i . '=' . $p;
			if( array_key_last($paramArray) != $i ){
				$paramsFixed .= '&';
			}else{
				$paramsFixed .= '&rel=0';
			}
		}
		
		
		// Jika ada params, add ?
		if( !empty($paramsFixed) ){
			$paramsFixed = '?'.$paramsFixed;
		}
		
		// Create HTML
		if( $lazyload ){		
			// Build div wrapper
			if( !$imgThumb ){
				$imgThumb = esc_url('https://i.ytimg.com/vi/' . $videoId . '/' . $imgQuality . '.jpg');
			}

			$embedContent = '<div class="erd-ytplay" id="erdytp-' . $videoId . '-' . $uniqid . '" data-vid="' . $videoId . '" data-src="'.esc_url('https://www.youtube.com/embed/'.$videoId.$paramsFixed).'"'.(eirudo_ytrp_stringtobool($allowFullscreen) ? ' data-allowfullscreen="true"':'').'><img src="' . $imgThumb . '" alt="YouTube video" /></div>';
		}else{
			// Build iframe embed
			$embedContent = '<iframe id="erdyti-' . $uniqid . '" src="'.esc_url('https://www.youtube.com/embed/'.$videoId.$paramsFixed).'" frameborder="0"'.(eirudo_ytrp_stringtobool($allowFullscreen) ? ' allowfullscreen=""':'').'></iframe>';
		}
		
		$html = '<div id="' . $divId . '" data-id="' . $videoId . '" class="erd-youtube-responsive' . $divClasses . '" style="' . $divStyle . '"><div style="' . $cssRatio . '">' . $embedContent . '</div></div>';
		
		// Check settings if only embed in shortcode page 
		//if ( $erdyt_options['printedscripts'] == 'embedonly' ){
			//add_action( 'wp_enqueue_scripts', 'eirudo_ytresponsive_scripts' );
		//}
	}else{
		$html = esc_html_e( 'Video ID not provided: Please check your shortcode.', 'simple-youtube-responsive');
	}
	return $html;
}
                    

Code file location:

simple-youtube-responsive/simple-youtube-responsive/fxs/fxs-shortcode.php

Conclusion

Now that you’ve learned how to embed the Simple YouTube Responsive 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 *