Cómo insertar un reproductor de video HTML5 responsivo
Lograr que tu señal de televisión online llegue a internet es solo el 50% del trabajo. El otro 50% es garantizar que tu audiencia pueda verla cómodamente desde su iPhone, tableta Android o Smart TV, sin importar el tamaño de la pantalla y sin tener que descargar aplicaciones extrañas.Para lograr esto, necesitas abandonar las tecnologías obsoletas e integrar un reproductor de video HTML5 responsivo. En esta guía técnica, te enseñaremos exactamente cómo insertar el código en tu sitio web (WordPress o HTML puro) para que tu transmisión se adapte perfectamente a cualquier dispositivo.
¿Por qué utilizar un reproductor HTML5 puro?
Hace algunos años, insertar video requería el uso de plugins de terceros como Adobe Flash Player. Hoy en día, según la documentación oficial de MDN Web Docs, la etiqueta nativa de HTML5 permite a los navegadores decodificar video directamente.Al contratar nuestros servidores de video streaming profesional, la plataforma te entrega automáticamente un código de inserción (embed). Este código ya está optimizado para consumir el protocolo HLS (HTTP Live Streaming), lo que garantiza máxima compatibilidad móvil. (Si no estás seguro de cómo funciona esto, lee nuestra guía sobre la diferencia entre RTMP y HLS).El problema de los Iframe estáticos
Por lo general, el código que te proporciona tu panel de streaming es un<iframe> con un ancho (width) y alto (height) fijos. Si lo pegas tal cual, se verá perfecto en una computadora, pero en un celular el video se desbordará de la pantalla o se cortará por la mitad.Cómo hacer tu reproductor 100% Responsivo (El truco CSS)
Para solucionar esto y mantener la proporción perfecta de 16:9 (formato panorámico de TV), no necesitas saber programación avanzada. Solo debes envolver tu iframe en un contenedor y aplicarle un código CSS específico.Paso 1: El Código HTML
Ve al editor de tu página web y pega tu iframe dentro de un contenedor “div” con la clase “video-responsivo”. Se verá así:<div class="video-responsivo">
<iframe src="URL_DE_TU_REPRODUCTOR" frameborder="0" allowfullscreen></iframe>
</div>Paso 2: El Código CSS
Ahora, ve al personalizador de temas de tu WordPress (Apariencia > Personalizar > CSS Adicional) o a tu hoja de estilos principal, y pega este código mágico:.video-responsivo {
position: relative;
padding-bottom: 56.25%; /* Proporción 16:9 */
height: 0;
overflow: hidden;
}
.video-responsivo iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}padding-bottom: 56.25% fuerza al contenedor a mantener siempre la relación de aspecto 16:9, mientras que el iframe interior se expandirá de forma absoluta cubriendo ese espacio. Ahora tu canal de televisión se achicará y agrandará dinámicamente según el tamaño de la pantalla del usuario.