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?

Summary
Come Rendere Immagini e Video YouTube Responsive
Article Name
Come Rendere Immagini e Video YouTube Responsive
Description
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
Author
Publisher Name
flavioweb.net
Publisher 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.

Be the first to comment

Leave a comment

Your email address will not be published.


*


*