All right everyone... welcome to this video section in the course... I can't stop smiling because I love this guy... random video of a pug, makes me happy though... I'll show you how to get the video inside of the project... some of the reasons that it might not be working for you...

some of the requirements, pros and cons... and of course, we'll put a pug in some giant text, which is awesome... because it says Pug Life... all right, let's jump in. To get started with, I made a video frame... to bring in a video, you bring it in just like an image...

and you can use your shortcut... 'Command Shift K', or 'Ctrl Shift K'... and in your 'Exercise Files' there is a 'Videos' option... if they are graded out, that is bad, one of two things is happening... you are on a free plan or you're on a paid plan... like Pro, Enterprise, Education, Organization...

there's a few different ones... but even if you're on those you can't be in Drafts... so go back to my 'Files' page, I'm in Drafts... there's my Figma file, I am part of a team... my Bring Your Own Laptop team, it is a paid team... and I can drag it into it...

I've made a folder for mine called Figma Advanced course... when it goes in there... I can open it up... and probably it'll still get stuck, it's coming in. Sometimes you have to restart Figma to kind of make it know that where it is... sometimes it does, sometimes it doesn't...

so now we can bring in videos... for those of you who only have a free account you can just watch this part... there's a few videos in succession here, in this section, about videos... do them because not only do we learn about video... you be like, "Ah, I'm not using video"... we do build some kind of complex components...

we throw in some Component properties, some Auto layout... yeah, so watch through even if you can't do it exactly... so, like I said, you can bring it in like an image... I'm going to bring in this one here, I should bring in this... because I'm doing a techno thing, but I was like, "Ah"... I'm going to do this pug, because pugs are awesome...

they make me smile every time I see one, for no good reason, pugs are awesome... and you place it just like an image, you can click once to get the full size... way too big... or you can just click and drag it out, that's what I'm going to do. So I'm going to drag it out... wait for it to load, click and drag it out...

I'm going to hold 'Shift' so it comes through the right proportions... so I'm not cropping it, and there you go... let's just preview it, how it is by Factory... so I'm going to switch to Preview mode... who remembers, to switch between Design and Preview... it's been a little while...

'Shift E', you got it, and with this one here I'm going to start a Flow point... so that it just jumps to this right page... all right, there's my pug, he's playing, hey, pug. One thing, I'm kind of jumping back from the end... kind of finished the video and I was like, "Oh, I should mention this about here"... so we put in an image using our shortcut, and just placed it...

you can actually just draw a frame... and apply it like we do an image, so we can give it a Fill of 'Solid'... go to 'Video', click on 'Choose Video'... if it says, "Hey, you can't," it'll explain why... it's either in Drafts or you're not on a paid account... and remember, that might change and you can bring in your sweet image...

sweet video, sorry, you end up at the same place... both have kind of a container with a Fill... this one here is a container with a Fill... they look a little different in the Layers panel... can you see, this one here is my Frame, called Frame 24, bad Dan  this one here is just, it's got a nice little icon for a video... but you can get them to do the exact same thing...

all right, carry on with the video... and yes, we make some text with video in it... but that's coming up later on, ignore that. Couple of things is, when you're dealing with a playback of the video... remember, there's Design view, and then there's Prototype view... Prototype view has some stuff...

to do with the video that you can't see on Design... so over here, let's move this over here... so Auto plays on, now if I preview it... 'Command Option Return', 'Ctrl Alt Return' on your keyboard... oh, I mention it again, just a little reminder... can you see, it doesn't play, which is not that fun...

what we can do, under 'Prototype', we can add an interaction that says... when it's tapped. I would like you to Play/Pause video... and all of that, This Video, Toggle, perfect... now let's give it a preview, 'Command 3', so I can get to my third tap... 'Ctrl 3' on a PC, just another reminder...

I can see this pause... I'm just clicking once, tapping to play... awesome... all right, happy pug. Before we move on and add controls in the next video... just to know that video is just a Fill like anything else...

so if I go back to 'Design' view you'll see that it's a Fill like our image... so we can do things with those Fills, just like an image... we can, remember the shortcut to hold down to start cropping? It's 'Command' on a Mac, 'Ctrl' on PC, so we can crop our video... it might make it trickier later on for the developer... to like produce the app in this weird shape that you produced...

normally videos kind of get stuck on a certain size... generally get 16 along the top and 9 down the side, it's called the aspect ratio  anyway, if you don't know much about video... you can crop it, it can cause problems. Like an image though I can draw a frame down here and I can say, you... I can either copy properties or I can grab just the Fill, go copy and paste it... there you go, you move them around...

can you put it in text? Oh, you totally can, you wait there. All right, Tupac wouldn't be happy but because we've already copied it... copied the Fill, I should be able to select this and go, 'Paste'... there you go, let's make sure that the video under 'Prototype' is 'Autoplay'... and let's go and check out, this...

make Dan happy, oh... the dog that always looks like he's pushed against the window... yeah, video can be used like images... a lot of the stuff, I won't cover everything, you can do... but if you can do it with an image, we can do it with a video... things you should know that, can and can't do.

So the first is, you need to be in a paid plan... Professional is the kind of starting one, there's lots of those other than that... check, they might change this, at the moment it is paid only... if you have a free Figma license they might make it in there... it's kind of a weird one, that's only part of the paid. The other thing is it needs to be not in Drafts...

is it can't be under Drafts, it has to be in a Paid team... that's my one there, not free, free bad, 'Ctrl 2'... the other thing is that it supports most kind of general file formats... so mp4, probably the most common, mov is another one... uses WebM as well, that's normally how you get these sorts of things... they can't be too big, I think 100 Meg is the limit for a video that comes in...

if you need to make things smaller and cut them up... probably something like Adobe Media Encoder, that's the one I use anyway... it's part of the Adobe Suite... it's really good at just trimming things up and making the file sizes smaller... and the other thing is, at the moment of this recording... videos don't play back on the mobile app, which is a pain...

so before you go and spend ages getting this thing working... knowing that you're going to do user testing, in the field, on the app... it's just not going to work, so you might just make it look like a video... but it doesn't work in the app at the moment, so double check that. The other one is, where do I get my sweet pug images? I get them from, for this demoing...

you know, I make videos, Premier Pro, After Effects... if I just need some placeholder stuff I jump out to something like Pexels... they're good for photos as well, but there's a video option... and they have got a really big library... this will change, you can see, there's my "pug" search... and I found this guy in here...

check the licenses, but most of these are, you're able to use them commercially... without attribution, but double check it yourself. If I need paid videos I'll use either Adobe Stock or Envato Elements... that's what I use for my stuff... if you want either of these you can use these affiliate links here... they give me a small cut when you sign up...

doesn't cost you anymore, it's very win-win... otherwise the site Pexels, for kind of just some placeholder videos... all right, let's get on to the next video.