How to embed videos and html content in your interactive wireframes
Embedding a video in your interactive prototypes
In order to embed a video, you need to use the Special Components widgets available in the editor, and follow these simple steps:
1. Drag an HTML widget to the canvas.
2. Open the YouTube page in your browser and choose the video you want to insert.
3. Click the Share icon below the video and select the Embed tab. Then copy the code displayed.
4. Go back to Justinmind.
5. Select the HTML component that you left on the canvas and paste the code in the HTML field, in the Properties tab.
Check that the URL of the video in the HTML has the http:// prefix, sometimes it gets automatically removed.
6. Click on the canvas again.
7. Re-size the component so that the video and the widget have the same size.
Now click on Simulate and enjoy!
You can do the same with Google Maps:
- Go to the Google Maps and insert the address you want.
- In the top left corner, click on the main menu icon and select ‘Share or embed map’ and then the “Embed map” tab.
- Copy the code and paste it in the HTML field as you did with the video, simulate and enjoy!
Embedding an audio file in your interactive prototypes
To embed an audio file (.wav or .mp3) in your prototype, you need to add an event to the UI element that you wish to trigger the sound. To do so, simply select the UI element in the canvas, go to the Events tab, choose your trigger (e.g. ‘On click’, ‘On Key Up’ or ‘On Page Load’), and then select the ‘Play Audio’ action. Then, choose and open your audio file from within your folders and click OK. Simulate your prototype to hear the audio in real time. Here’s an example.
With Justinmind you can also embed other types of content, such as: URL, documents (such as .pdf), flash videos, websites and even Google Charts! You will find all these Special Components in the widgets palette, just drag and drop them on the canvas and change their properties to personalize them to your needs.