Using videos in XD

Mockup digital laptop XD on screen on wood table at coffee shop

Using videos in XD is one way to get creative with your mockups. You can adjust basic settings, even trim your video and control how playback works. 

You can import your video through File > Import or dragging to the artboard. Videos work a lot like photos – you place them, scale them and can even mask them.

For videos, you will need to meet certain size requirements. (If your video does not, use media encoder to adjust these – typically using 720p works). 

Once imported, the first frame of the video displays.

In the property panel on the right, you can preview the video or adjust settings. Preview by clicking play. In this dialog, you can trim the video, set the playback to loop or disable audio. 

Next, determine when and how your video will play by choosing a playback option – either automatically or play on tap. These interactions are automatically created so you don’t need to go to prototype to make it work.

Table of Contents:
00:49 – File Import
01:07 – Common error message
01:14 – Using media encoder to resize
01:40 – Settings in Media Encoder
02:57 – Resizing video
03:39 – Preview video
03:47 – Trim video
04:03 – Loop playback
04:13 – How video will play
05:06 – Other ideas for video