Posts Tagged ‘iframe’

Inserire codice youtube in sito web senza errori di validazione W3C

L’inserimento dei video youtube all’interno di un sito web è un’operazione molto semplice: youtube stesso, infatti, definisce il codice da incorporare all’interno della pagina web. Il codice può essere del tipo:

<iframe width="560" height="349" src="http://www.youtube.com/embed/xxxxxxxxxxx" frameborder="0" allowfullscreen></iframe>

oppure

<object width="560" height="349"><param name="movie" value="http://www.youtube.com/v/xxxxxxxxxx?version=3&amp;hl=it_IT"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/xxxxxxxxxxx?version=3&amp;hl=it_IT" type="application/x-shockwave-flash" width="560" height="349" allowscriptaccess="always" allowfullscreen="true"></embed></object>

Cosa accade però se il sito deve essere accessibile?
In questo caso la situazione si complica.

Purtroppo, così come sono i due codici daranno errore sul W3C Validator, il primo per l’utilizzo del tag <iframe> e del tag <embed>, il secondo solo per l’utilizzo del tag <embed>. Non essendo possibile modificare il primo bisogna cercare di modificare il secondo codice togliendo il tag <embed>.
La soluzione è quella di usare il seguente codice:

<object width="560" height="349" type="application/x-shockwave-flash" data="http://www.youtube.com/v/xxxxxxxxxx"><p>Descrizione</p><param name="movie" value="http://www.youtube.com/v/xxxxxxxxxxx"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param></object>

Ovviamente al posto delle xxxxxxxxxxx va inserito il codice del video. In questo modo potrete inserire i video di youtube anche in siti accessibili.
NB: ricordatevi di inserire la descrizione del video all’interno del tag <object> e prima del tag <param>; essa serve nei casi in cui il video non può essere caricato.

Prelevare codice video youtube da URL o da codice incorporato con object o iframe

Mi è capitato spesso, nell’ultimo periodo, di dover inserire dei video youtube in siti web che richiedevano però modifiche del player, in particolare della sua dimensione. Per semplificare le cose ho scelto di incorporare nelle pagine uno stesso codice già personalizzato e passare a tale codice l’id del video scelto dal cliente.
Visto che ogni cliente ha un pensiero a sé stante, ho dovuto personalizzare il tutto in base alla scelta dell’utente di inserire l’URL del video, il vecchio codice di incorporamento o il nuovo codice utilizzato da youtube con il tag <iframe>. Per chi non lo sapesse, youtube ha da poco modificato il tipo di codice da incorporare con un codice che utilizza <iframe>; tale soluzione permette all’utente finale di visualizzare il video con tecnologia flash oppure HTML5 ed è particolarmente indicato per la visualizzazione dei video su dispositivi mobile. Tuttavia, il vecchio codice (tag <object>) è ancora disponibile su richiesta spuntando la voce “Utilizza vecchio codice di incorporamento” posto poco sotto il codice da incorporare.

Ho implementato una piccola funzione per l’estrazione dell’id del video in tutti e tre i casi. La riporto di seguito.

<?php
function estraiCodice($codice){
$codMod = $codice;
$tipo='';
$idVideo='';

//Verifico il tipo di codice
if(strstr($codMod, 'iframe'))
$tipo='iframe';
elseif(strstr($codMod, 'object'))
$tipo='object';
elseif(strstr($codMod, 'watch?v='))
$tipo='link';

//Operazioni nel caso di codice tradizionale con object
if($tipo=='object'){
$part = explode('?', $codice);
$cod = explode('.com/v/',$part[0]);
$idVideo = $cod[1];
}
//Operazioni nel caso di nuovo codice con iframe
elseif($tipo=='iframe'){
$part = explode('embed/', $codice);
$cod = explode('"',$part[1]);
$idVideo = $cod[0];
}
//Operazioni nel caso di inserimento di URL
elseif($tipo=='link'){
$part = explode('?v=', $codice);
if(strstr($part[1], '&')){
$cod = explode('&',$part[1]);
$idVideo = $cod[0];
}else{
$idVideo=$part[1];
}
}

return $idVideo;
}
?>

Il codice è molto semplice. Per prima cosa verifico il tipo di incorporamento che è stato inserito e, successivamente, effettuo le operazioni necessarie per estrarre l’id, che è il risultato che voglio ottenere.