norfipc.com
Códigos   Mapa del sitio   Informatica
NorfiPC » Códigos » Videos adaptables

Como insertar videos de YouTube adaptables en las páginas web


Actualizado: 17 de noviembre del 2022
Por: Norfi Carrodeguas
Código para impregnar uno o varios videos y lograr que se adapten a las pantallas de los móviles, que consuman menos recursos y validen correctamente. Solucionar los problemas y errores al embeber los videos de este servicio.
Como insertar videos de YouTube adaptables en las páginas web
Millones de páginas web de internet muestran videos insertados desde YouTube.
Los videos originales están alojados en los servidores de este servicio, lo que permite compartir cualquier cantidad de ellos en los blogs y sitios web, sin tener que gastar espacio ni ancho de banda.


Problemas insertando videos de YouTube


Para insertarlos Google ofrece un código de inserción que facilita la tarea solo copiando y pegando en el código fuente de nuestras páginas.
No obstante después de hacerlo nos daremos cuenta de tres cosas:
1- Los videos no son adaptables o sea no se adaptan al ancho de las paginas cuando estas se cargan desde un dispositivo móvil.
2- El código del iframe que suministra Google, genera una cantidad enorme de código para representar el reproductor, lo que incrementa considerablemente el tamaño de nuestras páginas.
3- Las páginas en HTML5 no validan correctamente en el Validador del W3C.
Para solucionar estos problemas en HTML5 existe una alternativa, un scpript creado por Amit Agarwal que hemos probado, usamos en nuestro sitio y compartimos en esta página con los lectores.


Código de Google para insertar los videos de YouTube en sitios web


El código que proporciona Google para insertar cualquier video en una página se puede obtener fácilmente en la opción insertar o dando un clic derecho con el mouse encima de cualquier video y en el menú seleccionar: "Copiar código de inserción".
Es similar al siguiente:
<iframe width="640" height="360" src="https://www.youtube.com/embed/UfcAVejslrU" frameborder="0" allowfullscreen></iframe>
El elemento IFRAME que se impregna de este modo tiene un ancho fijo, en este ejemplo de 640 pixeles, por lo que al cargar la página en un teléfono celular o tableta, no se ajusta a la pantalla de estos dispositivos.
Lógicamente nuestra página será sancionada por Google, el mismo que nos dio el código de inserción.
Además el atributo frameborder no valida en las especificaciones de HTML5 del W3C.
Otro inconveniente es la cantidad excesiva de código que se agrega en las páginas para poder representar el reproductor, aun si ningún lector presiona el botón de reproducir.


Código adaptable para insertar los videos de YouTube


El código que compartimos permite solucionar todos los problemas anteriores.
Consta de tres elementos:

Contenedor del video


1- Un contenedor DIV que debemos insertar en el lugar de la página donde deseamos mostrar el video.

Solo debemos sustituir VIDEO_ID por el identificador del video, que son los 11 caracteres que lo identifica.
Aparecen siempre al final de la dirección del video.
Por ejemplo en: https://www.youtube.com/watch?v=WPni755-Krg, el ID es WPni755-Krg
En cada página se puede usar uno o varios contenedores para uno o varios videos.

Script que genera un iframe adaptable


2- Un script que se puede insertar en cualquier lugar de la página, se recomienda al final. Genera el IFRAME, solo cuando el lector da un clic en el botón de reproducir.


CSS


3- El estilo CSS, el que se debe insertar en el área del HEAD antes de la etiqueta de cierre </head> o agregar su contenido a un elemento existente.

Es todo después de comprobar su funcionamiento nos percataremos de la mejora en el rendimiento.
A continuación se puede ver un video de YouTube insertado en esta página, utilizando este método.


Personalizar y optimizar el código


Los que analicen el código verán que se cargan dos pequeños archivos externos.
Uno de ellos una imagen png para representar el icono o botón de reproducir. Podemos modificar la URL y cargar una imagen de nuestro servidor.
La otra imagen "hqdefault.jpg" se carga desde YouTube y corresponde a la imagen o cuadro predeterminado del video a reproducir.
Los códigos CSS y JavaScript se puede comprimir, para optimizar más aun su funcionamiento.


Insertar videos adaptables de YouTube en WordPress


Una solución más sencilla que en la anterior, se puede emplear en WordPress.
Consiste en usar el iframe original de YouTube dentro de un contenedor con una clase y agregar una a la hoja de estilo predeterminada (style.css) que se puede encontrar en Apariencia > Editor.
El código es el siguiente:

IFRAME

CSS


Páginas relacionadas



Sobre el autor:

Norfi Carrodeguas es el fundador y webmaster del sitio web Norfipc, creado en el año 2010. Norfi es un ingeniero informático y desarrollador web cubano. Con más de 14 años de experiencia en la publicación en internet, comparte su tiempo con su consultoría SEO. Más información sobre el autor.

Comparta esta página
Facebook
Twitter

Sígueme en las redes sociales


Norfipc en Facebook Norfipc en Twitter Canales RSS con las últimas publicaciones

 
Inicio | Mapa del sitio | Buscar | Sobre mí