Vídeos incrustados sensibles en WordPress

Introducción

Como bien sabrás en WordPress se pueden incrustar vídeos de forma tan sencilla como pegar la URL del vídeo de YouTube en tu entrada o página para que éste se muestre automáticamente.

En realidad además de vídeos de YouTube en WordPress puedes incrustar contenido automáticamente de todos estos servicios:

ServicioTipo de contenidoDisponible desde
Animoto.Vídeos.WordPress 4.0.
Blip.Vídeos.WordPress 2.9.
Cloudup.Vídeos, Galerías e Imágenes.WordPress 4.4.
CollegeHumor.Vídeos.WordPress 4.0.
DailyMotion.Vídeos.WordPress 2.9.
Facebook.Publicación, actividad, foto, vídeo, medio, pregunta y nota.WordPress 4.7.
Flickr.Vídeos e Imágenes.WordPress 2.9.
FunnyOrDie.com.Vídeos.WordPress 3.0.
Hulu.Vídeos.WordPress 2.9.
Imgur.Imágenes.WordPress 3.9.
Instagram.Imágenes.WordPress 3.5.
Issuu.Documentos.WordPress 4.0.
Kickstarter.Proyectos.WordPress 4.2.
Meetup.com.Varios.WordPress 3.9.
Mixcloud.Música.WordPress 4.0.
Photobucket.Imágenes.WordPress 2.9.
PollDaddy.Sondeos y encuestas.WordPress 3.0.
Reddit.Publicaciones y comentarios.WordPress 4.4.
ReverbNation.Música.WordPress 4.4.
Scribd.Documentos.WordPress 2.9.
SlideShare.Presentación de diapositivas.WordPress 3.5.
SmugMug.Varios.WordPress 3.0.
SoundCloud.Música.WordPress 3.5.
Speaker Deck.Presentación de diapositivas.WordPress 4.4.
Spotify.Música.WordPress 3.6.
TED.Vídeos.WordPress 4.0.
Tumblr.Varios.WordPress 4.2.
Twitter.Tweet, perfil, lista, colección, me gusta y Momento.WordPress 3.4.
VideoPress.Vídeos.WordPress 4.4.
Vimeo.Vídeos.WordPress 2.9.
Vine.Vídeos.WordPress 4.1.
WordPress plugin directory.Plugins.WordPress 4.4.
WordPress.tv.Vídeos.WordPress 2.9.
YouTube.Vídeos.WordPress 2.9.

Problema

Al incrustar vídeos de cualquiera de los servicios indicados en la tabla anterior WordPress genera un iframe automáticamente en la entrada o página, pero éste no es sensible por lo que no en todos los temas se gestiona su tamaño de forma adecuada en todos los tamaños de dispositivos disponibles.

Incluso hemos llegado a ver vídeos incrustados con tamaños descomunales que sobresalen ampliamente de la capa que lo contiene en dispositivos que soportan más allá de los 1.000 píxeles, pantallas de ordenador, por ejemplo, por lo que te puedes imaginar cómo se veía semejante engendro en dispositivos móviles.

Solución

La solución a este problema pasa por incrustar un pequeño código PHP en el fichero functions.php de tu tema hijo que añadirá una nueva capa HTML previa al iframe. Esta simple función PHP es la que tienes que añadir:

//Incrustamos código HTML previo a los iframe
function apg_video_incrustado( $html ) {
 return '<div class="video-contenedor">' . $html . '</div>';
}
add_filter( 'embed_oembed_html', 'apg_video_incrustado', 10, 3 );
add_filter( 'video_embed_html', 'apg_video_incrustado' );

Gracias a esta función PHP añadiremos la necesaria capa HTML tanto en los vídeos incrustados por el propio código nativo de WordPress como por el código del plugin para WordPress Jetpack by WordPress.com.

Para que el nuevo código HTML incrustado junto al iframe tenga el estilo deseado debemos añadir un pequeño código CSS que puedes incrustar en el fichero style.css de tu tema hijo o en las opciones de tema. El código CSS necesario para solucionar definitivamente el problema es:

/*iframe*/
.video-contenedor {
	position: relative;
	padding-bottom: 56.25%;
	height: 0;
	overflow: hidden;
}
.video-contenedor iframe, .video-contenedor object, .video-contenedor embed, .video-contenedor video {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

Gracias a esta combinación de PHP y CSS daremos una solución definitiva a los iframe “insensibles” que no quieren respetar las medidas dadas por el diseño sensible de tu tema. Y no sólo los iframe, también mantendrá a raya a las etiquetas object, embed y video.

Esperamos que os resulte útil y funcional este pequeño truco que a buen seguro os sacará de más de un apuro en el futuro. ¿Nos lo cuentas?

2017-12-11T20:50:12+00:00 10 de mayo de 2017|Categorías: Art Project Group|Etiquetas: , , , , , |1 comentario

Un comentario

  1. Galeo domingo, 14 de mayo de 2017 en 8:11 - Responder

    Gracias por compartir esta solución. Un saludo.

¿Nos dejas tu comentario?