Variation 6: GIFs and videos

- [Instructor] So one of the down sides of Figma is it's a static design tool, and if you are someone who is a visual designer, or has some images or videos you wanna put on your site, how would you do it? So luckily, Jacqueline has provided us with GIFs that look like this, but also an MP3 version of what she wants, as well. Now, we can add MP3s and GIFs to the web, it's pretty straightforward. Now, what I've just done is uploaded these, so I have my connie.gif and connie.mp4 file, how do we add this in? Now, luckily for GIFs it's really, really quick.

All I'd need to do is just change what I need, so in my grid layout for instance, I'm just gonna change it to connie.gif, and we'll just automatically get it on the site. So here we go, it's added as a wave. Now, the other thing that we might wanna do is change it for a video. So, how do we do this? Now, this is obviously not an image, it's a video (laughs). In here we've got connie.mp4, but it looks pretty much kind of the same, to be honest.

So I'm just gonna get rid of this image, and instead, replace it with a video tag. Now, a video tag has stuff that can go inside of it, so for instance, there could be more sources of the video, for here I'm just gonna keep it empty and instead, move back to the O in video. Got my cursor just after it, and I wanna pull this in, like I would pull in an image, so not just the image connie.gif, we wanna pull in connie.mp4. So, we're gonna add a space in here, and do src, source, we're gonna pull it in, this is gonna be equal to, in quotes, connie.mp4.

Now, if we look at the page right now, what we'll see is the video there, it's pretty big, how do we make it a little bit smaller? We wanna size it up, we want it to just fill the space it's in, so I'm just gonna go back to my style.css and I'm just gonna say all videos, for now, are just gonna be the width of the container, 100% So what we should see now, is this goes back to where it should do, but at the moment it doesn't play. So how do we make it autoplay? What we can do, is add some extra information to this video tag, so what we can say in my index.html, is after my source, but before we close this angle tag I'm gonna do a space.

I'm also gonna add in things like autoplay, which means it will autoplay, and it's not doing at the moment, so why is this not autoplaying at the moment? Well, there's more stuff that we need to add in. Also what we need to put in is playsinline, so this just means that we can play it in line. If we did wanna add more things to this, now, at the moment, if I just refresh, you'll notice that it plays really quick, but then it disappears, 'cause it's then, see it played within a loop.

If I wanna make this loop, I need to add in the word loop, of course, so now it should just play. Now, if I do wanna play this on mobile, we have to make this muted by default. So, if I'm on a mobile, and I want it played, it's almost like a GIF, I do have to make this muted, so this would now then play. If I just wanna play it as a normal video, all I'd need to do is add in all of these that can go, and I can add in controls. So here what we have is this play button, and we just press play, we have the cert of sound, we can make it full screen, so there's a few different options that we can do with videos that we can't do with GIFs.

So this, it's up to you which one you use. If this is gonna be a replacement for a GIF it would look something like this, if you just want it as a normal video you'd add just the word controls in there. So it depends on what video you want to play here.