WordPress: un plugin per caricare video YouTube in modo veloce, leggero e responsive

<?php
/*
Plugin Name: MS_youtube_light_embed
Plugin URI: http://spadamar.com/
Description: A plugin that allows to insert a YouTube video in a light way. Shortcode: [yt_video ids='YOUTUBE_ID']. You can add several video ID comma separated. Ex: [yt_video ids='YOUTUBE_ID1,YOUTUBE_ID2']. Other video settings are: border='0|1' controls='0|1' showinfo='0|1' (First value = default).
Version: 1.1
Author: Mario Spada
Author URI: http://spadamar.com
License: GPL
*/
 
wp_enqueue_style( 'msyle', plugins_url('msyle_css.css', __FILE__) );
 
function msyle_yt_video_func( $atts) {
	 extract( shortcode_atts( array(
				  'ids'	=> '',
				  'border' => '0',
				  'enablejsapi' => '1',
				  'controls' => '0',
				  'showinfo' => '0'
			 ), $atts ));
	$res = "";
	if (!empty($ids)) {
		$arrIds = array_map('trim',explode(",",$ids));
		$res .= "<div class='youtube-container'>n";
		foreach ($arrIds as $id) {
			$res .= "<div class='youtube-player' data-id='{$id}'></div>n";
		}
		$res .= "</div>n";
		$params = array('border' => $border,
						'enablejsapi' => $enablejsapi,
						'controls' => $controls,
						'showinfo' => $showinfo);
		$res .= msyle_printJS($params);		
	}				 
	 return $res;
}
 
function msyle_printJS ($params) {
		extract($params);
$res = <<<STR
<script>
		(function() {
			var v = document.getElementsByClassName("youtube-player");
			for (var n = 0; n < v.length; n++) {
				var p = document.createElement("div");
				p.innerHTML = labnolThumb(v[n].dataset.id);
				p.onclick = labnolIframe;
				v[n].appendChild(p);
			}
		})();
 
		function labnolThumb(id) {
			return '<img class="youtube-thumb" src="//i.ytimg.com/vi/' + id + '/hqdefault.jpg"><div class="play-button"></div>';
		}
 
		function labnolIframe() {
			var iframe = document.createElement("iframe");
			iframe.setAttribute("src", "//www.youtube.com/embed/" + this.parentNode.dataset.id + "?autoplay=1&autohide=2&border={$border}&enablejsapi={$enablejsapi}&controls={$controls}&showinfo={$showinfo}");
			iframe.setAttribute("frameborder", "0");
			iframe.setAttribute("id", "youtube-iframe");
			this.parentNode.replaceChild(iframe, this);
		}
</script>
STR;
		return $res;
}
add_shortcode( 'yt_video', 'msyle_yt_video_func' );
?>

.youtube-container { display: block; margin: 20px auto; width: 100%; max-width: 600px; }
.youtube-player { display: block; width: 100%; /* assuming that the video has a 16:9 ratio */ padding-bottom: 56.25%; overflow: hidden; position: relative; width: 100%; height: 100%; cursor: hand; cursor: pointer; display: block; margin: 1em 0}
img.youtube-thumb { bottom: 0; display: block; left: 0; margin: auto; max-width: 100%; width: 100%; position: absolute; right: 0; top: 0; height: auto }
div.play-button { height: 72px; width: 72px; left: 50%; top: 50%; margin-left: -36px; margin-top: -36px; position: absolute; background: url("http://i.imgur.com/TxzC70f.png") no-repeat; }
#youtube-iframe { width: 100%; height: 100%; position: absolute; top: 0; left: 0; }