Desarrollo Web

Inserción de videos en campos personalizados en WordPress

Desarrollo Web|3 min de lectura|
Comparte
Inserción de videos en campos personalizados en WordPress

Los videos son una buena forma para los sitios web de presentar contenido, productos o incluso ideales de marca de manera atractiva para los usuarios. Sin embargo, la inserción de éstos se puede convertir en un problema tanto para los administradores del sitio, como para los desarrolladores pues el proceso que requieren los sitios de videos (Youtube, Vimeo, etc.) para obtener el código de incrustación usualmente requiere un cierto nivel de conocimiento de html, y por lo tanto es necesaria una capacitación para los que terminarán siendo los administradores de contenido de nuestro sitio, todo esto por un pedazo de código que terminará en la mayoría de los casos viéndose asi:

<iframe src="https://cdn.ida.cl/wp-content/uploads/sites/5/2012/05/watch?v=JdCAQirclMg" frameborder="0" width="560" height="315"></iframe>

Este código es confuso y usualmente no tendrá los valores de alto (height) y ancho (width) que necesitamos para que el video se ajuste al diseño de nuestro sitio.

Por esta razón WordPress ofrece un sistema nativo que permite hacer esta incrustación solo escribiendo la url del video el cual queremos que se vea en el sitio. Se trata de un objeto php mencionado pero no documentado en el sitio oficial de WordPress que se encarga de hacer el objeto incrustable. Este objeto se llama $wp_embed y se encuentra como variable global en este CMS sólo si la opción “auto-incrustados” se encuentra activada en los ajustes de multimedia dentro del administrador.

Este objeto es especialmente útil a la hora de usar campos personalizados para los videos dentro de un post o página, pues posee un shortcode capaz de discernir de cuál de los sitios de videos viene la URL y genera automáticamente el código de incrustación.

Con este objetivo en mente se me ocurrió esta función:

function get_the_embed($url, $sizeStr=''){
    global $wp_embed;
    return $wp_embed->run_shortcode('[ embed '. $sizeStr .']'. $url .'[/ embed ]');
}
// Un ejemplo de uso sería algo así
echo get_the_embed("http://www.youtube.com/watch?v=JdCAQirclMg", 'width="600px" height="300px"');

Esta función es capaz de generar un objeto de video correspondiente al que existe en la URL “http://www.youtube.com/watch?v=JdCAQirclMg” con un ancho de 600px y un alto de 300px. Nótese que si el parámetro $sizeStr es igual a vacío el video se imprimirá con las medidas predetermidas en las opciones que aparecen en los ajustes de multimedia en el administrador de wordpress.

De esta forma usamos las capacidades nativas de WordPress para presentar contenido de video sin recargar al cliente o administradores de contenido con una capacitación que probablemente se le olvidará al cabo de un tiempo.

Comparte
E

Autor

Equipo IDA

Equipo IDA

Investigamos las tendencias en proyectos y estrategias digitales para complementarlas con nuestra experiencia en artículos informativos. Nuestro objetivo es aportar al desarrollo del área, discutiendo la efectividad de las tecnologías y técnicas aplicadas.

Artículos relacionados

Sabíamos optimizar WordPress como nadie. Por eso lo dejamos

14 años y 2.550 posts después.

Sabíamos optimizar WordPress como nadie. Por eso lo dejamos

Desarrollo|8 min lec|
Cerramos un ciclo: migramos www.ida.cl y blog.ida.cl, con más de 2.500 artículos publicados desde 2011, desde WordPress hacia un ecosistema moderno de Nuxt 4, Tailwind, Directus y PostgreSQL. Estas son las razones técnicas y arquitectónicas detrás de la decisión.
Arquitecturas de información en tiempos de Inteligencia Artificial

Diseño de Experiencia

Arquitecturas de información en tiempos de Inteligencia Artificial

Arquitectura De Informacion|8 min lec|
Cuando hablamos de diseño digital, solemos pensar en interfaces, flujos, usabilidad o experiencia de usuario. Sin embargo, mucho antes de que una persona interactúe con una pantalla, ya ha sido orientada —y en muchos casos condicionada— por una capa menos visible, pero profundamente estructurante: la arquitectura semántica. Lenguaje, categorías, etiquetas, naming y taxonomías no son […]
IDA

© 2026 IDA. Todos los derechos reservados.

ida.cl

Usamos cookies de analítica

Si aceptas, cargaremos Google Analytics y Meta Pixel para medir visitas y conversiones. Puedes rechazarlo y seguir usando el sitio.