WordPress Vimeo Shortcode

vimeo__shortcode.php

<?php

//
//
//
//
//
//

global $vimeo_ids;
$vimeo_ids = array();	
	
// Vimeo shortcode
function bpm_vimeo_shortcode($atts, $content = null) {
	
	$a = shortcode_atts( array( 
		'id' => '',
		'class' => '',
		'size' => '',
	), $atts );
		
	// Class
	$classes='vimeo-container ';
	if($a['class'] != '') {
		$classes .= $a['class'];
	}
		
	// SIZE
	$size='medium';
	if($a['size'] != '') {
		$size = $a['size'];
	}
		
	global $vimeo_ids;
	$vimeo_id = $a['id'];
	$vimeo_ids[] = $a['id'];
	
	if ( !defined('vimeo___player_SKD_style___defined') ){
		add_action( 'wp_footer', 'vimeo___player_SKD_style', 50);	
		define('vimeo___player_SKD_style___defined', TRUE);
	}	
	if ( !defined('vimeo___player_script___defined') ){
		add_action( 'wp_footer', 'vimeo___player_script', 55 );	
		define('vimeo___player_script___defined', TRUE);
	}

	add_action( 'wp_footer', function() use ( $vimeo_id, $size ) {
		echo '
			<div id="vid'.$vimeo_id.'" class="vimeo_popup vimeo_popup__'.$size.'">
				<div class="vimeo_popup__inner">
					<div class="vimeo_popup__close js-vimeo_popup__close">
						X
					</div>
					<div class="vimeo_popup__wrap">
						<div id="vimeo'.$vimeo_id.'"></div>	
					</div>
				</div>
			</div>			
		';
		}, 11 
	);	

	return '	
	<div class="'.$classes.'">	
		<div id="img'.$vimeo_id.'" class="player_trigger___vimeo player_trigger__'.$size.'">
		<img src="/wp-content/plugins/nli-functions-plugin/assets/vimeo__video__play.png">
		</div>
	</div>	
	';

}
add_shortcode( 'vimeo', 'bpm_vimeo_shortcode' );


function vimeo___player_SKD_style(){

	echo'
	<script src="https://player.vimeo.com/api/player.js"></script>
	<style>
	
		.player_trigger___vimeo {
			position: relative;
			display: block;	
			background-size: contain;
			border: 1px solid #dedede;		
		}
		
		.player_trigger___vimeo:hover {
			cursor: pointer;
		}	
				
		.player_trigger___vimeo.player_trigger__small,
		.player_trigger___vimeo.player_trigger__medium,
		.player_trigger___vimeo.player_trigger__large {
			height: 146.25px;
			width: 260px;	
		}
		@media only screen and (min-width: 48rem) { /* Styles that apply to COL-SM or larger */
			.player_trigger___vimeo.player_trigger__medium,
			.player_trigger___vimeo.player_trigger__large  {
				height: 281.25px;
				width: 500px;		
			}
		}
		@media only screen and (min-width: 64rem) { /* Styles that apply to COL-MD or larger */
			.player_trigger___vimeo.player_trigger__large {
				height: 360px;
				width: 640px;		
			}					
		}	

		.player_trigger___vimeo img {
			position: absolute;
			top: 50%;
			left: 50%;
			width: 50px;
			height: 50px;
			margin-top: -25px;
			margin-left: -25px;
		}	
		@media only screen and (min-width: 48rem) { /* Styles that apply to COL-SM or larger */
			.player_trigger___vimeo img {
				position: absolute;
				top: 50%;
				left: 50%;
				width: 100px;
				height: 100px;
				margin-top: -50px;
				margin-left: -50px;
			}
		}
				
		.vimeo_popup {
			display: none;
		}
		
		.vimeo_popup.is-active {
			display: block;
			position: fixed;
			width: 100%;
			height: 100%;
			background: #ffffffe6;
			top: 0px;
			left: 0px;
			z-index: 99999;
		}	
		
		.vimeo_popup .vimeo_popup__inner {
			padding: 8px 25px 15px;
			background: #ffffffe6;
			position: fixed;
			top: 15%;
			left: 10%;
			margin-left: 0px;
			width: 80%;
			max-width: 450px;
		}	
		@media only screen and (min-width: 48rem) { /* Styles that apply to COL-SM or larger */
			.vimeo_popup .vimeo_popup__inner {
				padding: 8px 25px 15px;
				background: #ffffffe6;
				position: fixed;
				top: 15%;
				left: 50%;
				margin-left: -300px;
				width: 600px;
				max-width: 600px;
			}
		}
		@media only screen and (min-width: 64rem) { /* Styles that apply to COL-MD or larger */
			.vimeo_popup .vimeo_popup__inner {
				padding: 8px 25px 15px;
				background: #ffffffe6;
				position: fixed;
				top: 15%;
				left: 50%;
				margin-left: -450px;
				width: 900px;
				max-width: 900px;
			}	
		}	
		
		.vimeo_popup__wrap > div {
			position: relative;
			padding-bottom: 56.25%;
			padding-top: 25px;
			height: 0;	
			border-radius: 5px;
			overflow: hidden;			
		}
		.vimeo_popup__wrap > div > iframe {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;		
		}
							
		.vimeo_popup__close.js-vimeo_popup__close {
			text-align: right;
			color: #000;
		}
		.vimeo_popup__close.js-vimeo_popup__close img {
			max-width: 30px;
		}
		.vimeo_popup__close.js-vimeo_popup__close:hover {
			cursor: pointer;
		}
					
	</style>';
}


function vimeo___player_script(){

	global $vimeo_ids;
	foreach ($vimeo_ids as $vimeo_id):
		echo'
		<script>
		jQuery(document).ready(function ($) {
			var vimeoVideoUrl = "https://player.vimeo.com/video/'.$vimeo_id.'";
			var match = /vimeo.*\/(\d+)/i.exec(vimeoVideoUrl);
			if (match) {
				var vimeoVideoID = match[1];
				$.getJSON("https://www.vimeo.com/api/v2/video/" + vimeoVideoID + ".json?callback=?", { format: "json" }, function (data) {
					featuredImg = data[0].thumbnail_large;
					$("#img'.$vimeo_id.'").css("background-image", "url(" + featuredImg + ")");
				});
			}
		});
		</script>
		<script>
			var opt'.$vimeo_id.' = {
			  id: '.$vimeo_id.',
			  width: 600
			};

			var vp'.$vimeo_id.' = new Vimeo.Player("vimeo'.$vimeo_id.'", opt'.$vimeo_id.');

			jQuery(document).ready(function ($) {
		
				$( "#img'.$vimeo_id.'" ).on( "click", function () {
					$( "#vid'.$vimeo_id.'" ).addClass( "is-active" );
				});
				$( ".js-vimeo_popup__close" ).on( "click", function () {
					$( "#vid'.$vimeo_id.'" ).removeClass( "is-active" );
					vp'.$vimeo_id.'.pause();
				});
					
			});
		</script>	
		';
	endforeach;
}
	


?>