Es importante que los videos de nuestro sitio web sean visualizados en todos los dispositivos móviles, es por ello que debemos añadir un formato «responsive» a nuestro reproductor. Para hacerlo basta con crear una hoja de estilos CSS en la que especificaremos el tamaño y diseño del reproductor. Puedes ver un ejemplo en el siguiente enlace: Video Responsive HTML
Crear Documento HTML
Debes crear un documento HTML en el que especificaremos la información a mostrar en el sitio y la URL de los videos que se añadirán. Agrega el código descrito a continuación:
<!doctype html> <html> <head> <meta charset="utf-8"> <title>Video Responsive Youtube</title> <link rel="stylesheet" href="styles.css"> </head> <body> <div id="header"> <h1>Video Responsive Youtube - internetedadinero.com</h1> <a href="https://internetedadinero.com">Pagina Principal</a> <a href="https://internetedadinero.com">Descargar Archivos</a> | <a href="https://internetedadinero.com/video-responsive-html/">Regresar al Tutorial</a> </div> <section id="contenedor"> <div class="videoResponsive"> <iframe src="http://www.youtube.com/embed/VgPRi3Fv99U"></iframe> </div> </section> </body> </html> |
Crear Hoja de estilos CSS
El documento HTML ya esta realizado y este se encuentra enlazado con una hoja de estilos CSS, debemos crear esta hoja de estilos que es la que permitirá que los videos se visualicen en todos los dispositivos móviles. Agrega los siguientes estilos al documento CSS.
body{ padding:0; margin:0; } h1{ color: #333; font-family:'open sans'; text-align:center; text-transform:uppercase; font-size: 20px; } /*********Estilos Para video Responsive***********/ #contenedor{ max-width:800px; margin:0 auto; } .videoResponsive{ margin:0 auto; height:0px; width:100%; padding-top:56.25%; position:relative; } .videoResponsive iframe{ position:absolute; height:100%; width:100%; top:0px; left:0px; } /*********Estilos para HEADER*********/ #header { background: #fafafa; padding: 6px; color: #333; text-align: center; } #header a { color: #000; font-family: 'open sans'; font-size: 16px; text-decoration: none; } |
Conclusiones
Ya se encuentran los archivos creados y enlazados, si probamos en nuestro navegador local abriendo el archivo HTML, podremos ver que al escalar la ventana el video también reduce su tamaño, permitiendo visualizarse en todos los dispositivos y volviendo su formato 100% responsive.
Ver ejemplo de Video Responsive: Video Responsive HTML
Descargar Archivos: Descargar Archivos
No olvides comentar si tienes alguna duda y si te ha gustado el articulo compártelo ¡Muchas Gracias!
