Poner videos de YouTube en sitios web es com\u00fan hoy en d\u00eda. YouTube proporciona un c\u00f3digo iframe para incrustar el video en sitios web. Sin embargo, el video renderizado a trav\u00e9s de este c\u00f3digo iframe no responde. Significa que en dispositivos peque\u00f1os como dispositivos m\u00f3viles, tabletas, es posible que su video no se vea bien.<\/p>\n
En realidad, sus videos incrustados de YouTube deben responder para una mejor experiencia de usuario. En este art\u00edculo, estudiamos c\u00f3mo insertar videos de YouTube receptivos en su sitio web.<\/p>\n
Encontr\u00e9 3 posibles formas de lograr nuestro resultado final. Ve\u00e1moslo uno por uno.<\/p>\n
Bootstrap es la herramienta de interfaz m\u00e1s popular que ayuda a desarrollar sitios receptivos. Tambi\u00e9n proporciona una soluci\u00f3n f\u00e1cil para hacer que su video de YouTube sea receptivo.<\/p>\n
Para comenzar, primero debe incluir el archivo CSS de Bootstrap de la siguiente manera. Si ya est\u00e1 utilizando Bootstrap en su proyecto, omita este paso.<\/p>\n
<link rel=\"stylesheet\" href=\"https:\/\/stackpath.bootstrapcdn.com\/bootstrap\/4.1.3\/css\/bootstrap.min.css\" \/><\/code><\/pre>\nLuego, use el siguiente HTML para incrustar su video usando un Bootstrap.<\/p>\n
<div class=\"container\">\n\u00a0\u00a0\u00a0\u00a0<div class=\"embed-responsive embed-responsive-16by9\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<iframe src=\"https:\/\/www.youtube.com\/embed\/VIDEO_ID?rel=0\"><\/iframe>\n\u00a0\u00a0\u00a0\u00a0<\/div>\n<\/div><\/code><\/pre>\nReemplaza el marcador de posici\u00f3n VIDEO_ID con el ID de video real. Pru\u00e9belo y ver\u00e1 que su video funciona bien en dispositivos m\u00e1s peque\u00f1os.<\/p>\n
Puede leer sobre este m\u00e9todo de incrustaci\u00f3n en la documentaci\u00f3n de Bootstrap<\/a>.<\/p>\nVideo de YouTube receptivo con Fancybox<\/h3>\n
Esta opci\u00f3n es un poco diferente. Aqu\u00ed, en lugar de mostrar el video directamente, mostramos una miniatura del video de YouTube. Y luego, al hacer clic en una miniatura, su video comenzar\u00e1 a reproducirse en la ventana emergente. Esto se puede hacer usando un fancybox<\/a>.<\/p>\nPara utilizar Fancybox, debe incluir los siguientes archivos CSS y JS en su sitio web.<\/p>\n
<link rel=\"stylesheet\" href=\"https:\/\/cdn.jsdelivr.net\/gh\/fancyapps\/fancybox@3.5.7\/dist\/jquery.fancybox.min.css\" \/>\n<script src=\"https:\/\/cdn.jsdelivr.net\/npm\/jquery@3.5.1\/dist\/jquery.min.js\"><\/script>\n<script src=\"https:\/\/cdn.jsdelivr.net\/gh\/fancyapps\/fancybox@3.5.7\/dist\/jquery.fancybox.min.js\"><\/script><\/code><\/pre>\nDespu\u00e9s de esto, coloque el c\u00f3digo a continuaci\u00f3n y listo.<\/p>\n
<a data-fancybox=\"\" href=\"https:\/\/www.youtube.com\/watch?v=VIDEO_ID\">\n\u00a0\u00a0\u00a0\u00a0<img src=\"http:\/\/i3.ytimg.com\/vi\/VIDEO_ID\/hqdefault.jpg\" \/>\n<\/a><\/code><\/pre>\nInserciones Lite de YouTube<\/h3>\n
En el primer m\u00e9todo, usamos c\u00f3digo iframe. Mientras usa un iframe, el navegador tiene que descargar casi 800kB de datos para reproducir un video.<\/p>\n
Usando fancybox, puede reducir esta carga. Pero nuevamente debes incluir su CSS y JS. Se recomienda agregar estos archivos a trav\u00e9s de CDN para liberar la carga del servidor.<\/p>\n
Mientras trabajaba en este tema, encontr\u00e9 un art\u00edculo que explica c\u00f3mo incrustar videos de YouTube de una manera diferente. No necesita usar un iframe en la carga de la p\u00e1gina ni debe incluir ning\u00fan archivo.<\/p>\n
El art\u00edculo proporciona un c\u00f3digo que cualquiera puede agregar f\u00e1cilmente a su aplicaci\u00f3n. Siga el art\u00edculo Lite YouTube Embeds<\/a> y agregue el c\u00f3digo como se sugiere.<\/p>\nEstas son las 3 formas posibles de incrustar un video de YouTube receptivo. Dependiendo de sus requisitos, puede elegir cualquiera de las soluciones.<\/p>\n
Art\u00edculos relacionados<\/h4>\n