Nell’articolo di oggi scopriamo come rendere gli embed di video come Youtube o post social completamente responsive senza dover agire manualmente su ognuno utilizzando WordPress.
Per prima cosa aggiungiamo il css che ci servirà per rendere gli embed di video Youtube ( e similare) o di post social completamente responsive e adattabili a qualsiasi risoluzione, mantenendone il formato 16:9.
/*--------------------------------------------------------------
# EMBED RESPONSIVE
--------------------------------------------------------------*/
.embed-responsive {
position: relative;
display: block;
height: 0;
padding: 0;
overflow: hidden;
}
.embed-responsive .embed-responsive-item,
.embed-responsive iframe {
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
border: 0;
}
.embed-responsive-16by9 {
padding-bottom: 56.25%;
}A questo punto andiamo ad aggiungere un filtro nel file functions.php del vostro tema dove andremo a rintracciare gli embed all’interno del contenuto del post, e andremo ad modificare l’iframe dell’embed andando ad aggiungere le classi che vedete nel css poco sopra.
//File functions.php
//Responsive Embeds
add_filter('the_content', function($content) {
return str_replace(array("<iframe", "</iframe>"), array('<div class="iframe-container"><iframe', "</iframe></div>"), $content);
});
add_filter('embed_oembed_html', function ($html, $url, $attr, $post_id) {
if(strpos($html, 'youtube.com') !== false || strpos($html, 'youtu.be') !== false){
return '<div class="embed-responsive embed-responsive-16by9">' . $html . '</div>';
} else {
return $html;
}
}, 10, 4);
add_filter('embed_oembed_html', function($code) {
return str_replace('<iframe', '<iframe class="embed-responsive-item" ', $code);
});
//Responsive Embeds
A questo punto caricate i file modificati e vedrete che senza dover intervenire all’interno di ciascun articolo aggiungendo classi, i video o i post social incorporati tramite embed appariranno ottimizzati e completamente responsivi.
Se questo articolo ti è stato utile commentalo qui sotto oppure lascia un like!
