How to Create an Interactive Video Player in Figma

Now that Figma supports video embeds we can create a video player that will work within the prototypes. In this video, we create an interactive video player component where you can play, pause, mute & unmute a video.
Note: Video import is supported for files in Education, Professional, Organization, and Enterprise teams only.
#VideoPlayer #InsertVideo #FigmaTutorialSeries
⏱️Timestamps:
0:00 - Intro
0:11 - Demo
0:40 - Getting Started
1:14 - Adding Video
3:42 - Adding Interactions
7:06 - Final Output
📄 Figma Community File: www.figma.com/community/file/...
🔴 Don't forget to Subscribe. Trust me it's absolutely FREE - bit.ly/SubToDesignXstream 😅
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
🌍 Social Media:
↪︎ LinkedIn - / designxstream
↪︎ Instagram - / designxstream
↪︎ Facebook - / designxstream
↪︎ Twitter - / designxstream
↪︎ Website - DesignXstream.com
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
🏷 Tags: How to Create an Interactive Video Player in Figma, video player in figma, figma video embed, drag drop video in figma, creating a video player, play pause video in figma, mute unmute video in figma, run a video in figma, video player component, video play pause, running video in figma.

[@Seungjos]

very helpful in a time consuming project 😊😊 thanks!!

[@DesignXstream]

You're welcome 😊

[@JulietAhiante-lc3rl]

super easy👍🏽 Thank you

[@DesignXstream]

Cheers ✌️

[@sharmadasankar2006]

Awesomee..!! The video is very useful. Clear explanation indeed. Thank you.

[@DesignXstream]

Hey Sharmada, I'm glad you found it useful! Cheers ✌🏼 :)

[@mhannbeats]

So cool 😀thx for sharing 🙂

[@DesignXstream]

Cheers ✌🏼

[@lissyjoy3424]

Excellent

[@DesignXstream]

Thanks 🤗

[@AndreaGonzalez-sc8de]

I wish you showed us how you created the controls component in Figma, that would've REALLY helped :/

[@DesignXstream]

Felt the video would get too long. Sorry about that. If you have any query ping me @designxstream on insta!

[@ArshadsHacx]

Very useful brother.

[@DesignXstream]

Glad you found it useful bro! Cheers ✌🏼

[@ArshadsHacx]

Cheers ❤️❤️❤️❤️

[@haileykhoo8927]

How about the video control to forward or backward control? Is it possible to do it in figma ?

[@DesignXstream]

That is not possible with the current features of Figma.

[@user-eb6mp2gf6y]

They added this feature, you can find it in the same place where the pause/play is.

[@anureddy6361]

Hello great tutorial ! if i want to take paid version for this video feature specially which has a monthly subscription . if After a month or two i want to use this file when the subscription ends does it work? Thank you

[@DesignXstream]

Hey Anu, If your subscription ends Figma will lock all your team files and they become non-editable.

[@mudassaralivlogs7943]

Is this in free version or in pro version please tell

[@DesignXstream]

Only available in Pro

[@user-rz7fn4ql9s]

for this you have to Figma pro version

[@DesignXstream]

yesss...

[@kennethlucas]

slow down

[@DesignXstream]

Sure will try 👍🏼

[@praveen3018]

Its not working bro, requires paid version to use this video 😒😒

[@DesignXstream]

Yes, I've already mentioned that in the intro of the video and also in the description. If you want a free approach then Anima is the only other option but it has its own preview platform.

[@praveen3018]

@@DesignXstream ok bro, can i add gif into figma? Im a newbie to this job.

[@DesignXstream]

@@praveen3018 Yes GIFs you can directly drag and drop into Figma in the free plan itself.