Hello everyone, in this video we're going to create a video... that plays only when you hover on it... a very important note is that I'm hovering on a mobile phone, which is impossible... you can only do this on a desktop version... where somebody's got a mouse that they can actually hover over... but I'm putting mine on the phone because that's what I had lying around...

it's the frames that we've built... so let's jump in and I'll show you how to hover and play. So I'm going to import a video, I'm going to bring in Video 2... I'm going to get roughly the right size here on my board... I'm going to hold 'Shift' while it's coming out... to make sure it's the right aspect ratio...

the height, and width aren't smooshed around... and I'm going to go, holding 'Shift'... get it to kind of match my thing down the bottom there. Great, now the weird thing is that I can't do this... I can't say, you, under Prototype, have an interaction that says... when I am-- this, is what I thought I was going to do, like, while hovering...

I want to play the video... you're like, On Tap, on--  this might change, so check this way ... because it's a lot easier, the way I'm going to show you... but at the moment you can't do video plays while hovering, in this interaction... there might be a workaround, let me know in the comments... if you figured it out better than I have here...

and I'll come back and re-record this video, for the moment though... I'm going to get rid of that interaction, I'm going to say, video, come down here... I'm going to need to make you a component... I'm going to rename it, let's call this one "Video Hover Play"... whether it's 'Command R', or 'Ctrl R', I'm going to need two variants... let's name them as we go along, so I'm going to click on the 'Component Set'...

go back to 'Design' we have a property called Property 1... let's call this one "Playback"... and we have got two variants, let's have a look... we've got Default, which is the top one, and this one's going to be "Pause"... so I want it to be pause by default, I'm tabbing down... and and the second value is going to be Play, so I need to make that happen...

this is an interesting thing, just in videos, in general... watch this, if I select on this top variant... let's pause, I need to move it above because it messes with my head... I need the same order as over here, Pause on top... if I go to Prototype, which is 'Shift E'... I haven't got that Autoplay from before, you're like, "Hey, where is that gone?"  It's weird now, because this is a variant it's actually wrapped up...

so the video's in there... and there's my Auto play... but if I click on just the outer wrapper, which is my variant... you can't see a lot of that stuff so just be mindful that... you're looking for the video deep down inside of it. So the first one is Autoplay off, and the second one...

double click to get inside... or hold 'Command', or 'Ctrl', click to dive inside... and make sure Autoplay is set to 'On'... I'm probably going to get the sound off, depends what you want to do... I don't think there is sound on this video but know that you can turn it on and off. So now we need the interactions, I'm going to click on this top one...

and I'm going to say, when you go to this one... I want not On Tap, I want to go, 'While Hovering '... but now I can go to 'Play/Pause', and it lets me, did not... you there, On Drag, no, well, have I got, already got one, I've already got one... so there's this one here, let's get rid of that... I've got, While Hovering, no, I don't want it on hover, jeez...

my brain sometimes... so we don't want it to On Hover what we want to do is say, On Hover... I don't want it to Play/Pause so let's get rid of this, start again, Dan... you'll do it, so I'll leave this in here, so On Hover... I don't want it to Play/Pause, I want it to just switch to this variant... so we're going to switch to, 'Change To', to 'Playback' to the 'Play' version...

which is the bottom one, so while hovering change it to that... then this is set to Autoplay, and it should go... let's drag out a duplicate, hold down the 'Option', or 'Alt' key... drag any one of these out, it actually grabs the whole instance set... not just that one part of it... and other than it doesn't line up oh, lining up now, let's give it a preview...

I've already got my preview open, I do not... dancing chickens... let's start this flow here, and watch, ready to go, look at that... here you go, it's a rather staged, well lit DJ set right there... but there we go, cool huh? All right, that's it, just remember that you can't hover on a mobile phone...

we're just doing it because that's what we have lying around in terms of frames... that's it for now, I'll see you in the next video.