Embedding videos and audio content

With Justinmind, you can embed videos and audio content (e.g. YouTube, Vimeo and Wistia videos) in your prototypes using the Special Components widgets.

Embedding a video in your prototype

There are two ways to embed video into your prototypes:

Local video files

To embed a local video file that is stored on your computer, follow these steps:

On Mac

1. Drag the Document widget onto the Canvas.
2. Look to the Properties palette and double-click on the ‘…’ icon to open a file browser.
3. Select the video you would like to embed. The format .m4v will work well here.
   Note: while the video will appear with scrollbars on the Canvas during editing, it will show correctly during simulation.
4. Click “Simulate” to see your local video play.

On Windows

1. Drag the Document widget onto the Canvas.
2. Look to the Properties palette and double-click on the ‘…’ icon to open a file browser.
3. Select the video you would like to embed. It should be in .mp4 format.
4. You may see a dialog prompting you to save or download the video file. Click ‘Cancel’.
5. Click “Simulate” to see your local video play.

Online video files

To add an online video to your prototype:

1. Go to an online video website and choose the video you want to insert.
   
   Find a ‘Share’ or ‘Embed’ button and copy the embed code provided.
   
2. Go to Justinmind and create a new prototype.
3. Drag an HTML widget to the canvas.
4. In the Properties palette, paste the code you copied into the “HTML” field of the General section, replacing the default code.
   
   Make sure you check that the URL of the video in the HTML has the http:// prefix – it’s sometimes automatically removed.
   
   Then, resize the HTML element so that the entire video window will be visible during simulation.
   
   
5. Click “Simulate” to see and interact with the embedded video in your prototype.

Embedding an audio file in your prototype

To embed an audio file (.wav or .mp3) in your prototype:

1. In a new prototype, select the UI element on the canvas that you want to trigger the audio file.
2. Go to the Events palette and click the “Add Event” button. Add an “On Click” + “Play Audio” event.
3. Select your audio file from the “Audio File” file browser and click “Open”.
   
   If you want to test your audio, click the “Play” button.
4. Click “Simulate” to interact with your prototype and hear your audio in real time.

You can download our example here.