WordPress: embed responsive di video Youtube o social posts

WordPress: embed responsive di video Youtube o social posts

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!

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

Questo sito usa Akismet per ridurre lo spam. Scopri come i tuoi dati vengono elaborati.

Up Next:

Clienti dell’ Interior Design Pretendono Queste 5 Cose dal Sito di un Libero Professionista

Clienti dell’ Interior Design Pretendono Queste 5 Cose dal Sito di un Libero Professionista