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

embedding video in 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.Add the document widget
  2. Look to the Properties palette and double-click on the ‘…’ icon to open a file browser.Choose a file for the document browser
  3. Select the video you would like to embed. The format .m4v will work well here.Select a video from the file browser
    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.The document widget with video during simulation

On Windows

  1. Drag the Document widget onto the Canvas.Add the document widget
  2. Look to the Properties palette and double-click on the ‘…’ icon to open a file browser.Choose a file for the document 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’.Cancel file download
  5. Click “Simulate” to see your local video play.The document widget with video during simulation

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.
    embedding audio
  2. Go to Justinmind and create a new prototype.
  3. Drag an HTML widget to the canvas.html widget on 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.html link prefix

    Then, resize the HTML element so that the entire video window will be visible during simulation.

    vimeo embed html
  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.audio file embed
  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.