Embedding Media Tutorial - Axure Docs

YouTube Videos. 1. Widget Setup. Open a new RP file and double-click Page 1 in the Pages ... ›TheBasicsTheBasicsInteractiveButtonHidingandShowingWidgetsPassTexttoNextPageAnchorLinkEmbeddingMediaFullWidthImageorBannerScrollingRegionRotatingCarousel/SlideshowNavigationMenuTooltipsTabMenuAccordionMenuDragandDropComplexInteractionsAccountLoginAutoTabFieldsBlinkingTextDynamicallySetDroplistOptionsSetTextwithDroplistRequiredFieldsScrollActivatedStickyHeaderSetDynamicPanelStateonNextPageSliderControlTermsandConditionsTimerMobilePatternsSwipingSlideshowToggleSwitchInthistutorial,you'lllearnhowtoembedYouTubevideos,GoogleMaps,andothermediainyourprototypepagesusingtheinlineframewidget. Note ClickheretodownloadthecompletedRPfileforthistutorial. YouTubeVideos 1.WidgetSetup OpenanewRPfileanddouble-clickPage1inthePagespanetoopenitonthecanvas. DraganinlineframewidgetontothecanvasfromtheLibrariespane. IntheStylepane,selectVideointheinlineframePreviewdropdown. Note TheinlineframepreviewimageisdisplayedonlyontheAxureRPcanvas,anditservestoletyouknowwhatkindofcontenttheframewilldisplayinthewebbrowser. 2.GetanEmbedURLfromYouTube Inyourwebbrowser,navigatetowww.youtube.comandlocatethevideoyouwouldliketoembed. Justbelowthevideo,clicktheShareicon.Inthedialogthatappears,clickEmbed. Intheembedcodethatappearstotheright,locatethesrcattributeandhighlighttheURLtotherightofit(withoutthequotes).CopytheURL. 3.SettheInlineFrame'sTargettotheVideo'sURL BackinAxureRP,double-clicktheinlineframetoopentheLinkPropertiesdialog. Atthebottomofthedialog,selecttheradiobuttonforLinktoanexternalurlorfileandpastetheURLyoucopiedfromYouTubeintotheHyperlinkfield. ClickOKtoclosetheLinkPropertiesdialog. 4.PreviewthePage Previewthepage,andtheYouTubevideoshouldappearintheinlineframe. GoogleMaps 1.WidgetSetup OpenanewRPfileanddouble-clickPage1inthePagespanetoopenitonthecanvas. DraganinlineframewidgetontothecanvasfromtheLibrariespane. IntheStylepane,selectMapintheinlineframePreviewdropdown. Note TheinlineframepreviewimageisdisplayedonlyontheAxureRPcanvas,anditservestoletyouknowwhatkindofcontenttheframewilldisplayinthewebbrowser. 2.GetanEmbedURLfromGoogleMaps Inyourwebbrowser,navigatetowww.google.com/mapsandsearchforanaddressorlocationyouwouldliketouse. ClicktheShareiconintheleftpanel.Inthedialogthatappears,clickEmbedamap. Intheembedcodethatappearsatthetopofthetab,locatethesrcattributeandhighlighttheURLtotherightofit(withoutthequotes).CopytheURL. Note TheURLwillbeverylong,somakesuretohighlightallofit,everythinguptotheclosingquotationmarks.Example: https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3356.8953887537073!2d-117.16021218445606!3d32.71540739443067!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x80d953589d4f36eb%3A0x4c8aa579077a06bd!2s1100%2C+707+Broadway%2C+San+Diego%2C+CA+92101!5e0!3m2!1sen!2sus!4v1558551203274!5m2!1sen!2sus 3.SettheInlineFrame'sTargettotheMap'sURL BackinAxureRP,double-clicktheinlineframetoopentheLinkPropertiesdialog. Atthebottomofthedialog,selecttheradiobuttonforLinktoanexternalurlorfileandpastetheURLyoucopiedfromGoogleMapsintotheHyperlinkfield. ClickOKtoclosetheLinkPropertiesdialog. 4.PreviewthePage Previewthepage,andtheGoogleMapshouldappearintheinlineframe. AdditionalInformationandTips EmbeddingLocalContent Toembedafilefromyourcomputerinaninlineframewidget,usethefile'spathinyourcomputer'sfilesystem(eitherrelativeorabsolute).Double-clicktheinlineframeandenterthefilepathintheLinktoanexternalurlorfilesection. Note Readaboutthelimitationsofworkingwithlocalfilesintheinlineframewidgetreferenceguide. ←AnchorLinkFullWidthImageorBanner→YouTubeVideos1.WidgetSetup2.GetanEmbedURLfromYouTube3.SettheInlineFrame'sTargettotheVideo'sURL4.PreviewthePageGoogleMaps1.WidgetSetup2.GetanEmbedURLfromGoogleMaps3.SettheInlineFrame'sTargettotheMap'sURL4.PreviewthePageAdditionalInformationandTipsEmbeddingLocalContent