Come Rendere Immagini e Video YouTube Responsive

video-youtube-responsive

Spesso abbiamo bisogno di dover inserire delle immagini e dei video negli articoli. La maggior parte dei temi WordPress, visualizza correttamente sia i video che le immagini in maniera responsive su tutti i tipi di dispositivo. Qualche volta però succede che i temi non prevedono questa opzione (ebbene si, anche nel 2017 capita) e i nostri video YouTube non vengono visualizzati correttamente sugli smartphone (in maniera responsive). Stessa cosa con le immagini. In questi casi basterà apportare alcune modifiche tramite istruzioni CSS. Vediamo come fare.

Come rendere responsive i video YouTube

Come sapete per inserire un video Youtube su WordPress, basta inserire nell’articolo (visualizzato come testo) il codice di incorporamento che di solito si presenta in questa maniera:

<iframe width=”854″ height=”480″ src=”https://www.youtube.com/embed/HOu6fTBEJ74″ frameborder=”0″ allowfullscreen></iframe>

Per rendere responsive il video YouTube dovremo andare ad inserire delle istruzioni css e a fare delle semplici modifiche al codice HTML.

Per prima cosa creiamo una classe HTML da inserire lato testo, nell’articolo intorno all’iframe del nostro video. La chiameremo “videoyoutube”.

<div class=”videoyoutube”>

Poi mettiamo l’attributo “auto ” su altezza e larghezza del video.

<div class="videoyoutube">
<iframe src="https://www.youtube.com/embed/HOu6fTBEJ74" width="auto" height="auto" frameborder="0" allowfullscreen="allowfullscreen">
</iframe>
</div>

A questo punto si deve andare nel css del tema, oppure (più facilmente) su ASPETTO –> PERSONALIZZA  e selezionare CSS PERSONALIZZATO (o CSS Aggiuntivo).

Qui dovrete inserire le istruzioni per la visualizzazione responsive del video YouTube, come sotto.

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

A questo punto il video youtube si visualizzerà correttamente su tutti i tipi di dispositivo, sarà quindi diventato responsive.

Come rendere responsive le immagini

Per le immagini basterà creare una classe come sotto:

<img class=”img-responsive” ….link immagine…. />

e poi, nello stesso punto di prima, inserire i CSS appositi:

.img-responsive {
display: block;
max-width: 100%;
height: auto;
}

 
Tutto qua. Davvero semplice vero?

Riassunto
Come Rendere Immagini e Video YouTube Responsive
Titolo
Come Rendere Immagini e Video YouTube Responsive
Descrizione
Come Rendere le immagini ed i video YouTube responsive sui nostri siti web. Tutti i passaggi spiegati in maniera semplice e con codici pronti da copiare ed incollare
Autore
Publisher
flavioweb.net
Logo

AD

About the author

Flavio

Mi trovo nel campo del web dal 2006. Nel tempo mi sono specializzato soprattutto nell'indicizzazione,  nel posizionamento di siti internet e nell'utilizzo dei social media principali a fini di marketing.

Commenta per primo

Inserisci il tuo commento

La tua email non sarà pubblicata


*


*

code