logo

midudev


Transcribed podcasts: 146
Time transcribed: 5d 6h 19m 9s

This graph shows how many times the word ______ has been mentioned throughout the history of the program.

Que ni se te ocurra utilizar este código que te da YouTube para añadir vídeos en tu página web.
Te explico por qué hay una alternativa mucho mejor.
Normalmente copiarías este código, te vas a tu página web, lo pegas aquí
y cuando vas, pues ahí aparece el vídeo.
Parece que bien, ¿no?
Pero si abres las herramientas de desarrollo,
nos vamos aquí a Nickword y Refresco,
fíjate la de recursos que está cargando,
un montón de JavaScript, de CSS,
un montón de tracking que está espiando a tu usuario
y además es que son más de 3 MB, son casi 4 MB de contenido
y eso que el usuario todavía no le ha dado clic,
que no está viendo el vídeo ni siquiera.
Vamos a arreglar esto.
Existe un componente que puedes utilizar con cualquier framework
o sin ningún framework, lo puedes utilizar con Vanilla JavaScript,
que se llama LiteYouTube
y lo único que tienes que hacer es añadir esta línea de código,
nos vamos por aquí a nuestro proyecto, lo pegamos aquí
y vamos a utilizar un web component que se llama LiteYouTube,
VideoID, vamos a pegar el ID que tenemos aquí,
cerramos aquí el web component,
cerramos, eliminamos el iframe,
obviamente, volvemos a nuestra página web,
refrescamos y ahí está,
aparece el vídeo perfectamente.
Si le damos play, te doy la bienvenida.
Funciona exactamente igual,
pero fíjate la diferencia
si abro las herramientas de desarrollo,
refresco y ¿cuánto es?
Pues es muy poco.
Estamos cargando ahora 37k,
solo lo que necesitamos
y hasta que no le da play el usuario,
no va a cargar todos los recursos que necesita.
Mira la diferencia
y cómo estamos mejorando la experiencia del usuario.
Así que, por favor,
no utilices este código
para añadir o incrustar vídeos de YouTube
en tu página web.
Gracias por ver el video.