Embedding videos and audio content

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

Embedding a video in your prototype

Follow the steps below to add a Vimeo video to your prototype using the HTML widget from the Special Components widget library:

1. Go to Vimeo and choose the video you want to insert.
   • Click the Share icon below the video and copy the embed code provided.
   • 
2. Go to Justinmind and create a new prototype.
   • Drag an HTML widget to the canvas.
   • 
3. In the Properties palette, paste the code you copied from Vimeo 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, sometimes it gets automatically removed.
   • 
4. Then, resize the HTML element so that the entire Vimeo video window will be visible during simulation.
   • 
5. Click “Simulate” to see and interact with the embedded Vimeo video in your prototype.

Embedding an audio file in your prototype

You can download our example here.

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.
   • Select your audio file from the “Audio File” file browser and click “Open”.
   • If you want to test your audio, click the “Play” and then click “OK”.
3. Click “Simulate” to interact with your prototype and hear your audio in real time.