Como colocar Video Responsive de Youtube WordPress

Los iFrames en un sitio web responsive(adaptable) pueden ser una molestia, y desafortunadamente las incrustaciones de video como las de YouTube se suministran como un iFrame. 

Afortunadamente, hay un código simple que puede agregar a su tema de WordPress para cambiar automáticamente el tamaño de estos videos insertados para que se ajusten perfectamente a su sitio web.

Este código envuelve el iFrame en un div y agrega algunas clases. Luego, el CSS cambia el tamaño del objeto a una proporción adecuada de 16: 9.

Insertar Youtube Responsive en WordPress con código.

Para comenzar, agregue el siguiente código a su archivo functions.php del tema que tienes activado:

<?php

//Insertar este código al final del archivo functions.php


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);
});

Después debes agregar este CSS a su hoja de estilo (es posible que deba modificarlo según su hoja de estilo):

.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%;
}

Este código lo puedes agregar desde el administrador de tu sitio WordPress -> Apariencia -> Personalizar ->CSS adicional , ahí pegas el código.

Espero que te haya ayudado este post.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *