Media Elements

Add a GIF

GIF stands for Graphic Interchange Format, but all you need to know is that it’s just another type of image file. The only difference is that the file has many images. When displayed in the browser, the images are played in sequence, similar to the frames of a movie. Think of it like one of those flip books that seem like the image is animated when you flip it.

alt text


Add a video

Aside from text and images, one of the most common things we like to add to websites are videos. Video files are very large, so it’s best to use a service to upload and display the video such as YouTube. Once uploaded to YouTube, how do we get it to play on our website? We use a special tag called an iframe

Iframes display HTML from other websites inside our own. It’s like a window, where you can see what is happening outside on the internet from inside the current website. This process is called embedding.

For example, the video below is an iframe from Benji’s Instragram:

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

Many sites offer iframes to embed in your website. As an example, here is how you find the iframe code for a YouTube video:

alt text

Here is a sample iframe

Copy the following code: <iframe width="560" height="252" src="https://www.youtube.com/embed/lQsqEBSGdyc" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen> </iframe>

Paste it on your Code Pen and it will look like this: