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.

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:

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

Here is a sample iframe

Copy the following code: <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>

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