Pubblicato il 15/04/13e aggiornato il

Come mostrare un video di Youtube con una immagine di sfondo.

Come inserire un video di Youtube in un layout con una immagine di sfondo e un testo che lo illustri e che abbia un link verso altra pagina web.
A seguito di una domanda che mi è stata fatta in un commento vado a illustrare un semplice procedimento per mostrare un video di Youtube con una immagine di sfondo e una scritta che lo illustri insieme a un link che rimandi al Canale o a una qualsiasi altra pagina web.

Tale procedura funziona anche con altri siti di video-sharing e consiste semplicemente nell'inserire il codice per incorporare il video all'interno del codice di una tabella. Prima di iniziare occorre procurarsi l'URL della immagine di sfondo e quello del link che vogliamo mostrare oltre naturalmente al codice del video. Per Youtube si va su Condividi > Codice da incorporare e si scelgono le dimensioni del player. Per rendere la cosa più semplice posterò un codice di esempio che poi ognuno potrà personalizzare

<table border="0" cellpadding="20" style="background: transparent url(https://lh3.googleusercontent.com/-p9YxLDVCHFw/UIabcJgQciI/AAAAAAAAbkg/iZeq93c9LOU/s909/natura4.jpg); width: 600px;"><tbody>
<tr>
      <td  width="600"><div align="center">
<iframe allowfullscreen="" frameborder="0" height="315" src="http://www.youtube.com/embed/XSB2d23lgQE?rel=0" width="560"></iframe></div>
</td>
    </tr>
<tr>
      <td  width="600"><div align="center">
<span style="color: red; font-size: 20px; font-weight: bold;">GUARDA QUESTO VIDEO nel mio<br />
<a href="http://www.youtube.com/user/parsifal32" target="_blank">CANALE YOUTUBE</a></span></div>
</td>
    </tr>
</tbody></table>

Il risultato è il seguente:

video-youtube-immagine-sfondo
I parametri da modificare sono stati colorati di viola mentre il codice del video è quel blocco che inizia con <iframe> e che termina con </iframe>. Sono importanti i codici dei colori, le dimensioni dei caratteri della scritta ma soprattutto la larghezza della tabella (600 pixel) e l'URL della immagine di sfondo. Particolare attenzione va posta al valore cellpadding="20" che determina la distanza minima del video dai bordi della tabella e che può essere modificata secondo le proprie esigenze. Ricordarsi che in questo caso 560+20+20=600 cioè la larghezza della tabella con 560 quella del video e 20 il cellpadding.




2 commenti :

  1. Ciao Ernesto, come va? Buona settimana! Senti ho di nuovo problemi con quel widget dello scorrimento. Non ho modificato nulla, ho provato solo la stringa per rendere il blog compatibile con gli ultimi IE, eppure ora non funziona più! Parte e alla terza immagine il riquadro sparisce e le immagine scorrono fuori più in basso! Cosa può essere successo? Ho riprovato a mettere anche le stringhe vecchie (visto che era l'unica modifica apportata!) ma nulla... Puoi aiutarmi? Scusa se ti stresso! :)

    RispondiElimina
    Risposte
    1. Non mi ricordo a che widget ti riferisci. Se hai già fatto un passo indietro con le modifiche non è che sono un mago... @#

      Elimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti. Se ti ho aiutato con il post o con le risposte ai commenti condividi su Facebook o su Twitter. Grazie.