Como hacer adaptables los vídeos en WordPress

 En Utilities

A veces, la función por defecto de WordPress de hacer los vídeos responsivos adaptables, mediante la simple inserción de la URL de YouTube o Vimeo en el cuerpo de texto, no funciona, y por comentarios o visitando webs, parece ser que varias personas se han topado con el mismo problema. Existen plugins que permiten solucionar esta carencia, gracias al uso de algún shortcode, pero resulta restrictivo; después de probar diferentes opciones, finalmente encontré un par:

Plugin

El plugin Responsive Video Embeds permite en un par de clicks convertir todos nuestros videos en responsivos adaptables. Soporta, entre otros, YouTube, Vimeo, DailyMotion, Blip.tv, Scribd, etc… Para quienes no desean entrar en temas de programación aunque sencilla, tienen aquí, como se puede ver, una herramienta de fácil instalación y manejo, dado que no requiere el uso de shortcodes, sólo la URL del vídeo que deseamos mostrar. Sin embargo, una de mis reticencias a instalar plugins es que depende luego de la constancia de los desarrolladores en tenerlo al día: a la larga, un plugin desactualizado puede llegar a causar conflictos o incluso comportar algún fallo de seguridad que comprometa el sitio donde esté instalado.

Código

Si preferimos decantarnos por el uso de código, aquí también existen varias opciones, incluso usando JavaScript. Sin embargo, con un poco de PHP y CSS, podemos resolver fácilmente hacer responsivos adaptables nuestros vídeos. Primero, en el archivo functions.php de nuestro tema (se recomienda siempre el uso de Child Theme para evitar perder estas personalizaciones en futuras actualizaciones), agregar lo siguiente:

/* Add responsive container to embeds */
function alx_embed_html( $html ) {
return '<div class="video-container">' . $html . '</div>';
}
add_filter( 'embed_oembed_html', 'alx_embed_html', 10, 3 );
add_filter( 'video_embed_html', 'alx_embed_html' ); // Jetpack

Luego en nuestra hoja de estilo style.css, agregar:

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

Con estas dos sencillas inserción de código, conseguimos que nuestros iframe, object, embed y video sean responsivos adaptables (con un ratio 16:9), incluso los elementos incrutados de Jetpack.

Fuentes: WordPress | AK | Imagen de Two Fucking Developers

Recent Posts

Dejar un comentario

Empieza a escribir y pulse Intro para buscar