How to add background videos to your prototype - Anima Blog
Design

How to add background videos to your prototype2 min read

Reading Time: 2 minutes Prototyping with Anima Tip #5 out of 5

How to Add Background Video to Your Sketch Prototype

How to add background videos to your prototype2 min read

Reading Time: 2 minutes

Grab attention!

Embedding videos or GIFs within your prototype is a great way to grab attention.
It will help you improve the user experience and increase engagement with your design. Whether you want to impress your clients, your team members, or explain your ideas better to engineers — it will help you get the job done.

Adding a background video or a GIF

Select the layer (i.e a rectangle) that you want to embed into, and click:
Anima Panel > Prototype > Smart Layers > ‘Video/GIF’

In the pop-up window, paste your video’s/GIF’s URL.
And choose the Video settings (Auto Play, Loop, No Controls, Cover).

Adding a background video or a GIF in SketchAdding a background video or a GIF

Tips & Tricks! 💫

  • Upload your Video/GIF and get a URL
    If you want to embed locally stored files, go to your Project Settings in the Anima web app, and in the Files tab, you can upload your videos/GIF files from your computer and Anima will create a direct .mp4/.gif URL that can be embedded.
  • Keep Video Ratio
    To keep the resolution, make sure you’re keeping the video’s/GIF’s size ratio. So when you create the ‘video layer’, use the right ratio + lock ratio 🔒 on Sketch’s inspector.
  • Fullscreen Video
    To make your video/GIF play on fullscreen, you should use pins.
    Select the layer and go to Anima Panel > Layout> Pins and Pin the layer to the top (or bottom) + to both sizes. Again, make sure you’ve locked the layer’s ratio.

Make your video/GIF play in fullscreen

Preview in Browser

To see your video live, Hit ‘Preview in Browser’ (Videos only play in the browser, not in Sketch). 👉Live preview here

See your video live in SketchSee your video live

Discover more tips for prototyping with Anima in Sketch:

What is Anima?

Anima allows designers to create high-fidelity prototypes inside Sketch, Adobe XD, and Figma and exports them as HTML & CSS with a single click.

As always, we’re excited to hear your feedback!

Join the discussion or show off your designs on FacebookTwitterSlackInstagramand vote for new features at UserVoice.

Stay creative!
❤️ Anima team

|

Co-founder & CPO

UI/UX master with a keen eye for user journeys. Working on improving the handoff from design to code and creating better interfaces. A huge fan of music festivals and a chocolate lover.

Leave a comment

Your email address will not be published. Required fields are marked *