© 2002-2017 Axure Software Solutions, Inc. All rights reserved. Axure ® is a registered trademark of Axure Software Solutions, Inc.

AXURE

RESOURCES

LEGAL

CONNECT

EMAIL

EMBED MEDIA

Include YouTube videos, Google Maps, and other media in your prototype pages by using the inline frame widget.


STEP 2: SET INLINE FRAME TARGET TO THE URL

Back in Axure RP, select the "Video Frame" inline frame widget. In the Properties tab of the Inspector, click "Frame Target" to set the inline frame's target. You can also do this by double-clicking the inline frame.


In the Link Properties dialog that appears, select the radio button for "Link to an external url or file". Paste the copied YouTube URL into the field.

MORE RESOURCES

SETUP

In the training file, open the page named "Embed Media". On the canvas are two inline frame widgets. We'll embed a YouTube video in one and a map from Google Maps in the other.

YOUTUBE VIDEO

In your web browser, navigate to www.youtube.com and open a video you would like to use. Below the video, under the "Subscribe" button, click "Share".


In the new page section that appears, click on the "Embed" tab. This tab will have an HTML embed code on it that's already highlighted. Locate the "src" attribute in the code and highlight just the URL to the right of that attribute (without the quotes). Copy the URL.

STEP 4: PREVIEW

Preview the page to view your embedded YouTube video in your web browser.

GOOGLE MAPS

CORE TRAINING

Getting Started

Flow Diagrams

Static Wireframes

Interactive Prototyping

Collaboration

TUTORIALS

Interactive Button

Text Link

Show Hidden Widget

Navigation Menu

Tab Control

Lightbox

Flyout Menu / Custom

     Tooltip

Accordion Control

Account Login

Image Carousel

Auto-Tab Fields

Required Fields

Dynamically Set

     Droplist Options

Set Text with Droplist

Pass Text to Next Page

Full-Width Image or

     Banner

Scroll-Activated Sticky

     Header

Slider

Drag and Drop

Embed Media

Scrollable Table

Set Dynamic Panel State

     on Next Page

Table with Images

Terms and Conditions

Custom Icon Button

Custom Text Field

Custom Checkbox and

     Radio Button

Custom Droplist

Custom Datepicker

MOBILE TUTORIALS

Swiping Slideshow

Scrolling Content

Sliding Menu

Toggle Switch

Animated

     Screen Transition

REPEATER

TUTORIALS

Basic Repeater -

     Dynamic Table

Sorting Rows

Filtering Rows

Adding, Deleting, and

     Updating Rows

Marking Rows

Advanced Repeater -

     Product Listing

Reference Pages

Advanced Filtering

Pagination

REFERENCE GUIDE

STEP 0: DOWNLOAD THE TRAINING FILE

If you don't already have it, download AxureTraining.rp and open it up in Axure RP. This file contains pages corresponding to each of the tutorials on the Axure training site. We recommend always completing the tutorials using our prepared file, but if you can't, that's okay too—we'll always tell you what to build in a new file in order to complete each tutorial without using AxureTraining.rp.

STEP 1: GET EMBED URL FROM YOUTUBE

 

At this point, you can customize how the video will behave in the web browser with YouTube's "autoplay", "start", and "end" parameters.


- If you want the video to begin playing as soon as it loads, add "?autoplay=1" to the end of the embed URL.


STEP 3: SET PREVIEW IMAGE

With the "Video Frame" inline frame widget still selected, scroll to the bottom of the Properties tab in the Inspector. Under "Preview Image", select the radio button for "video".


This will give the inline frame a play button preview image on the Axure RP canvas to indicate which kind of media is embedded in it.

In your web browser, navigate to www.google.com/maps and search for an address or location you would like to use. Then, click the hamburger icon next to the search bar to open the menu. In the second section of the menu, click "Share or embed map".


In the modal that appears, click on the "Embed map" tab. This tab will have an HTML embed code at the top-right that's already highlighted. Locate the "src" attribute in the code and highlight just the URL to the right of that attribute (without the quotes). Note that the URL will be very long, so make sure to highlight all of it, everything up to the closing quotation marks. Then, copy the URL.

STEP 1: GET EMBED URL FROM GOOGLE MAPS

STEP 2: SET INLINE FRAME TARGET TO THE URL

Back in Axure RP, select the "Map Frame" inline frame widget. In the Properties tab of the Inspector, click "Frame Target" to set the inline frame's target. You can also do this by double-clicking the inline frame.


In the Link Properties dialog that appears, select the radio button for "Link to an external url or file". Paste the copied Google Maps URL into the field.


Click "OK" to close the Link Properties dialog.

 

STEP 3: SET PREVIEW IMAGE

With the "Map Frame" inline frame widget still selected, scroll to the bottom of the Properties tab in the Inspector. Under "Preview Image", select the radio button for "map".


This will give the inline frame a map preview image on the Axure RP canvas to indicate which kind of media is embedded in it.

STEP 4: PREVIEW

Preview the page to view your embedded Google Maps map in your web browser.

Note: The steps listed in this tutorial can be used to embed most web-hosted content. For information on embedding local files, see the inline frame widget documentation.

Note: Autoplay will not work on mobile devices.


- If you want the video to begin playing at a certain timestamp, add "?start=" followed by the timestamp in seconds. For example, to start the video at the 1 minute 30 second mark you would add "?start=90".


- If you want the video to stop playing at a certain timestamp, add "?end=" followed by the timestamp in seconds.


- If you want to use two or more of these tags together, separate them with an "&" character. For example, "?autoplay=1&start=90".


When you're done configuring the URL, click "OK" to close the Link Properties dialog.