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:
"Simple YouTube Responsive is a WordPress plugin that seamlessly optimizes your YouTube videos for various screen sizes, ensuring a perfect viewer experience every time."
- [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.
Leave a Reply