Navegación: 

Elementos multimedia

Agregar un GIF

Las siglas GIF significan Graphic Interchange Format, pero todo lo que debes saber es que es un tipo de imagen. La única diferencia es que este archivo contiene varias imágenes. Cuando se muestra en el navegador, las imágenes se reproducen de forma secuencial, similar a los frames (o marcos) de una película. Piensa en ellos como uno de esos cuadernos donde se ve una imagen animada según se van pasando las páginas.

alt text

Agregar un video

Aparte de texto e imágenes, una de las cosas más comunes que nos gusta agregar a un sitio web son videos. Los archivos de video tienen tamaños muy grandes, así que es mejor usar un servicio para subir y mostrar los videos como por ejemplo YouTube. Una vez que el video se ha subido a YouTube, ¿cómo hacemos para que se vea en nuestro sitio web? Usaremos una etiqueta especial llamada iframe

Los iframes muestran HTML desde otras páginas web dentro de la tuya propia. Es como una ventana, donde puedes ver lo que pasa afuera en Internet desde tu propio sitio web. Este proceso se llama embeber. Por ejemple, el video de abajo es un iframe del Instagram de Benji:

View this post on Instagram

Push yourself to try new things! 🍉 I stick to the paleo diet most days (usually just the meat part) but on occasion I go for something crazy

A post shared by Benji Escobari Marquez (@benjimite_thegudboi) on

Muchos sitios ofrecen iframes para ser embebidos en tu sitio web. Por ejemplo, aquí puedes ver cómo encontrar el código iframe para un video de YouTube:

alt text

Ejemplo de iframe

Copia el siguiente código: <iframe width="560" height="315" src="https://www.youtube.com/embed/lQsqEBSGdyc" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen> </iframe>

Pégalo en tu Code Pen y se verá de la siguiente forma: