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

by spadamar on

YouTube video player in WordPress

YouTube video player in WordPress

Elaborando i concetti espressi in questo articolo: “Come inserire un video YouTube in una pagina web in modalità responsive e leggera”  che ho scritto per il Blog della Cooperativa Elzevira, ho pensato che potesse essere utile proporre questa modalità di caricamento dei video di YouTube anche con un plugin per WordPress.

In pratica si tratta di caricare i video di YouTube senza pre-caricare il player, in modo di velocizzare in maniera drastica il caricamento della pagina. Viene caricata solo l’immagine di copertina del video e viene sovrapposto il simbolo “play” del video. Questa operazione si rivela particolarmente utile quando i video nella pagina sono parecchi.

Solo al momento del click sul simbolo “play” viene caricato il player e mostrati eventualmente i controlli e le altre informazioni.
Il plugin è davvero essenziale, una volta scaricato ed attivato, si utilizza semplicemente inserendo in un post o in una pagina uno shortcode che ha un solo attributo obbligatorio: ids nel quale deve essere specificato l’id del video (o più id separati dalla virgola se si vogliono mostrare diversi video). Lo shortcode ha questo formato: [yt_video ids='ID_DEL_VIDEO']. E’ naturalmente possibile utilizzare lo shortcode anche all’interno di un template o in una funzione del tema attivo attraverso la funzione do_shortcode() (vedi: Riferimento_funzioni/do_shortcode). Non sono presenti altri settaggi nel pannello amministrativo di WordPress.

Gli altri attributi dello shortcode, presi direttamente da YouTube (https://developers.google.com/youtube/player_parameters?hl=it) sono:

Attributo Descrizione
enablejsapi Valori: 0 o 1. Il valore predefinito è 0. Se imposti questo parametro su 1, abiliti la Javascript API. Per ulteriori informazioni sulla Javascript API e sul suo utilizzo, consulta la documentazione della JavaScript API.
controls Valori: 0, 1 o 2. Il valore predefinito è 1. Questo parametro indica se abilitare o disabilitare la visualizzazione dei controlli del video player. Per gli incorporamenti IFrame che prevedono il caricamento di un Flash player, consente anche di definire quando vengono visualizzati i controlli e quando viene caricato il player:

controls=0: i controlli del player non vengono visualizzati. Per gli incorporamenti IFrame, il Flash player viene caricato immediatamente.
controls=1: i controlli vengono visualizzati nel player. Per gli incorporamenti IFrame, la visualizzazione dei controlli del video e il caricamento del Flash player hanno luogo immediatamente.
controls=2: i controlli vengono visualizzati nel player. Per gli incorporamenti IFrame, la visualizzazione dei controlli del video e il caricamento del Flash player hanno luogo all’avvio della riproduzione.

Nota. Anche se i valori 1 e 2 del parametro hanno lo scopo di fornire un’esperienza utente identica, controls=2 offre un miglioramento delle prestazioni rispetto a controls=1 per gli incorporamenti IFrame. Al momento però i due valori conferiscono al player un aspetto leggermente diverso (variano, ad esempio, le dimensioni del carattere del titolo del video). Se la differenza tra i due valori risulta impercettibile per l’utente, il valore predefinito del parametro può variare da 1 a 2.

showinfo Valori: 0 o 1. Per questo parametro il valore predefinito è 1. Se imposti il valore del parametro su 0, il player non mostrerà determinate informazioni, ad esempio il titolo del video e l’autore del caricamento, prima dell’avvio della riproduzione.

Ecco il codice del plugin (in fondo alla pagina c’è anche il link per scaricare il pacchetto già pronto):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
<?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' );
?>

E queste invece sono le istruzione per il foglio stile associato (msyle_css.css):

1
2
3
4
5
.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; }

Ecco come appare il video caricato in un articolo di prova:

Screenshot plugin YouTube

Screenshot plugin YouTube

Il pacchetto completo è scaricabile qui: MS_youtube_light_embed.zip

Riferimenti:
Come inserire un video YouTube in una pagina web in modalità responsive e leggera
Parametri del player | YouTube IFrame API | Google Developers
A More Efficient Method for Embedding YouTube Videos

Leggi il contenuto originale su Il blog di Mario Spada

Written by: spadamar