How to add background videos to your prototype2 min read

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

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

Discover more tips for prototyping with Anima in Sketch:

• Part #1 out of 5, prototyping with Sketch: How to create interactions in Sketch prototypes
• Part #2 out of 5, prototyping with Sketch: How to add breakpoints to your Sketch prototype
• Part #3 out of 5, prototyping with Sketch: How to add external URL links to your prototype
• Part #4 out of 5, prototyping with Sketch: How to create overlays in your Sketch prototypes

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 Facebook, Twitter, Slack, Instagram, and vote for new features at UserVoice.

Stay creative!
❤️ Anima team