Domande o Richieste ? al 3496993121 | Email | Preventivo
Scopri la nostra Assistenza Speciale per Wordpress

Inserire Video Youtube Responsive in un sito/pagina web

Inserire Video Youtube Responsive in un sito/pagina web

video-youtube-responsive-sito-web

A quanti di voi è mai capitato di avere la necessità di integrare nel proprio sito web un video di Youtube ?

L’altro giorno mi sono imbattuto in un piccolo problema ad aggiungere un video da YouTube a uno dei siti dei miei clienti.

Nella versione “desktop” era tutto a posto, ma siccome il sito è responsive, nel momento del ridimensionamento faceva un piccolo scherzetto.

Siccome ho la necessità che il video sia anch’esso responsive, ho trovato un piccolo trick, semplice e funzionale.

Se volete rendere il vostro video Youtube responsive inserite questo codice nel vostro foglio di stile.

.video-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px; height: 0; overflow: hidden;
}
 
.video-container iframe,
.video-container object,
.video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

poi inserite il vostro codice html del video che potete reperire direttamente da Youtube.

Un esempio è :

<iframe src="https://www.youtube.com/embed/vZK5mzj62Pk" width="560" height="315" frameborder="0" allowfullscreen="allowfullscreen"></iframe>

Ora il vostro video sarà responsive.

About Emiliano

Mi chiamo Emiliano Prelle, web designer freelance, con la passione per il web e la tecnologia e tutto quello che le ronza intorno.
Mi occupo di sviluppo, progettazione e realizzazione siti internet ( sviluppati in particolare con WordPress ), grafica e SEO.

Lascia un commento

Contatti

Loranzè, via Fiorano n 83
10010 ( TO )
Cell: 3496993121
Email: Scrivimi via email
P.IVA: 11315150018
Operiamo nel rispetto della tua Privacy

desclaimer

Il sito www.emprsitiweb.com è di proprietà di Prelle Emiliano e da esso gestito. La veste grafica, le immagini ed i testi presenti nel sito sono soggetti a copyright da Prelle Emiliano e/o dei rispettivi proprietari e non possono essere riprodotti o trasmessi con nessun mezzo, né essere utilizzati in ambito professionale o commerciale senza autorizzazione scritta da Prelle Emiliano o dei legittimi proprietari.

Ultima dal Blog

Social

Resta aggiornato su WordPress !

Guide/Tutorials per WordPress

Suggerimenti e trucchi per WordPress

Un Report 100% gratuito che ti aiuta ad evitare gli errori più comuni per il tuo sito WordPress

Se ti iscrivi, riceverai periodicamente : 

Rispettiamo la privacy. La tua Email verrà solo utilizzata per questa newsletter, e non sarà ceduti a terzi.

Grazie per la tua iscrizione !

Miraccomando : Clicca sul seguente LINK, per visionare tutte le informazioni ed i dettagli relativi alla tua iscrizione !

Ti anticipo, che devi cliccare sul link di conferma che ti ho appena inviato al tuo indirizzo email per poter essere iscritto correttamente alla newsletter. Questo ti permetterà di ricevere tutti gli aggiornamenti ed il report free, sui 25 errori più comuni di WordPress, che ho preparato per te !

Nella mail troverai tutte le informazioni del caso.

Nb: Se la mail non arriva subito, non preoccuparti; causa ritardi del server può impiegarci anche fino a 2 ore.

I 25 Errori WordPress più comuni da evitare 

Iscrivendoti al blog ricevi gratuitamente una report in cui ti mostro i 25 errori più comuni che commettono i principianti in WordPress in fase di realizzazione di un Sito Web. 

Iscriviti ed ottieni il report gratuito !

*Lo scarichi in 5 secondi. 100% Gratis

Rispettiamo la privacy. La tua Email verrà solo utilizzata per questa newsletter.

Grazie per la tua iscrizione

Miraccomando : Clicca sul seguente LINK, per visionare tutte le informazioni ed i dettagli relativi alla tua iscrizione !

Ti anticipo, che devi cliccare sul link di conferma che ti ho appena inviato al tuo indirizzo email per poter essere iscritto correttamente alla newsletter. Questo ti permetterà di ricevere tutti gli aggiornamenti ed il report free, sui 25 errori più comuni di WordPress, che ho preparato per te !

Nella mail troverai tutte le informazioni del caso.

Nb: Se la mail non arriva subito, non preoccuparti; causa ritardi del server può impiegarci anche fino a 2 ore.