Justinmind

SUPPORT

Learn how to prototype web and mobile apps

How to embed videos and html content in your interactive wireframes

Learn how to embed videos, maps and any other external HTML content in your interactive wireframes with this tutorial. You can add content from video providers such as YouTube and Vimeo

Embed content in interactive wireframes -HTML Widgets

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.

Properties of the HTML widget

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:

  1. Go to the Google Maps and insert the address you want.
  2. In the top left corner, click on the main menu icon and select ‘Share or embed map’ and then the “Embed map” tab.
  3. Copy the code and paste it in the HTML field as you did with the video, simulate and enjoy!

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.

Next tutorial > Embed Google Maps in your web and mobile wireframes

21 Comments

  1. Rest

    October 18, 2014 at 6:07 am

    I am trying to input one of my videos i have downloaded to you tube. I took the html widget from the web widgets but i am using it thru the android version. I think I am doing something wrong because the video is not showing up. Is it because I cant use the html video upload on the android app creator?

    • admin

      October 22, 2014 at 9:21 am

      Check that the URL of the video in the HTML has the http:// prefix. Sometimes Youtube removes it.

  2. Jim Clark

    December 29, 2014 at 7:23 pm

    I’m working in the prototyper and it won’t display the video for this URL:

    http://vimeo.com/112232073

    But, it will display the video for this URL:

    http://nytimes.com

  3. P M

    January 28, 2015 at 7:07 pm

    I tried embedding a youtube video into the HTML and having an uploaded image as the trigger for the video to open & run, but neither the image nor the video activate when simulated…the text states “The content of the body element is displayed in your browser”

    • Lidia Rodriguez

      March 9, 2015 at 11:26 am

      Have you copied the ‘insert’ embedded code in the properties of the HTML field in the widget properties? That should work.

  4. kate

    March 22, 2015 at 10:34 am

    Hi,
    When I use the HTML widget a d try an embed a YouTube video – it comes up with plugin blocked?

    • Lidia Rodriguez

      March 23, 2015 at 11:27 am

      Hi Kate, please send an email to jim.support@justinmind.com with more details so we can solve the issue.

  5. Isabel

    April 29, 2015 at 12:42 pm

    Hello!
    I’m need to insert an offline map, how can I do that?
    Thank you for your answer!!

    • Lidia Rodriguez

      July 6, 2015 at 10:11 am

      You can embed an HTML code or paste a screenshot.

  6. Lemaire Says :

    May 21, 2015 at 2:30 pm

    Hi,

    I would like to put an element hover my HTML widget.

    But anything will go behind the HTML widget …

    Has someone figured out how to do that ?

    • Lidia Rodriguez

      July 3, 2015 at 10:40 am

      Hi Lemaire, the HTML widget configuration defines that it will always remain on top.

  7. Ronny

    September 10, 2015 at 4:30 pm

    I am unable to get the URL widget to work. I’ve tried pasting in a number of urls…all with an “http://” prefix. Please advise.

    • Danielle Schneider

      September 10, 2015 at 4:33 pm

      What happens when you try to use the URL widget? Does the webpage not appear or does something else happen?

  8. Nuno Pedrosa Says :

    September 24, 2015 at 11:07 am

    Is there any way to load a url from a datafield, in the same fashion as, for instance, images?

    • Danielle Schneider

      September 24, 2015 at 4:44 pm

      By datafield, do you mean from a data grid or data list? You can have an event that will detect the value of the datafield, and when that value is a certain value, that will load a URL through the HTML or URL widget.

      • Nuno Pedrosa Says :

        September 25, 2015 at 1:14 pm

        I mean loading a different Url for each selected item on a Data Grid. I am using the expression SE(itemselected, url), where ‘itemselected’ is a Variable and ‘url’ is an Attribute from a Data Master. The problem is, contrarily to the Image widget for instance, HTML and URL widgets’ values cannot be calculated and there seems to be no widget, from those that do allow their values to be calculated, such as the Image or the Text widgets, that load a Url. The Text widget obviously just shows the url as text and does not load it, whereas the Image widget simply does not show anything. Am I forgetting anything or there is currently no way of setting a Url programmatically?

  9. Rob Duff

    October 22, 2015 at 11:57 am

    I’m trying to embed PDF drawings that i have on my hard drive to make a navigable document, I can embed video and maps but cannot get any of my PDF documents to show when i simulate.

    • Danielle Schneider

      October 24, 2015 at 4:42 am

      Are you using the document widget or HTML widget to embed your PDF? If possible, try using the document widget if you’re not already.

  10. Jajajagagaga

    January 9, 2016 at 8:12 pm

    Hi
    I want to insert a mp3 file which plays, if I click/touch on a certain button.
    How do I do that?