Axure Tutorial: YouTube Video Player

Introduction

Playing video is a feature of many apps and websites. Axure has two ways to play video. One is to play local video. Because Axure cannot open local files during preview, it can only be seen by generating HTML and opening local video through inline framework. 

But this method is very troublesome. First, the location of video files is fixed, and others can't watch it remotely; The second is to export to a local file after each modification to see the effect.

If we use Axure to watch online videos, we usually open the corresponding web address in the way of inline framework, but there are many other things in the general web page besides videos, and we don't need other superfluous things in our prototype. So today we'll learn how to call YouTube video player in Axure.

Features to be Realized

1. Play any Youtube Video.
2. Set the video player to any size.

How to Realize the Features

1. Open YouTube videos through inline frames.
2. 
Adjust the size of the inline frame.

Preview the completed prototype for this tutorial

Widgets Setup 

Widgets Setup

Drag an inline frame to the canvas as the container for the player, then adjust the frame to the desired size.

Set Video Source

Find Video Source

1. Open any YouTube video, right-click video and select Copy Embedded Code.

Paste code into Axure canvas

2. Paste the copied code onto the Axure canvas, and we can see this Code:

<iframe width="1680" height="1050" src=" https://www.youtube.com/embed/tbMuV2N2aKc " title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

· Width = "1680" height = "1050" represents the original width and height of the video. You can set the inline frame to this size, and the aspect ratio of the video will be normal.
·  And src=“ https://www.youtube.com/embed/tbMuV2N2aKc "represents the source of the video, we copy https://www.youtube.com/embed/tbMuV2N2aKc

Set the video source of the inline frame

3.Double click the inline frame and paste the copied code into the input box of the inline frame.

Finally, preview the prototype to see if the called YouTube video is normal.

In this way, all the settings are completed. If you have any questions and suggestions, please leave a message

If you like the article, please share it with others with page link, thanks for your supporting! ❤

Note: Click here to download the completed RP file for this tutorial (RP 10 or up).


Well Joe @AxureBoutique, a technical writer and teacher, focuses on Axure prototype design and product design.


Leave a comment

Please note, comments must be approved before they are published

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.


This section doesn’t currently include any content. Add content to this section using the sidebar.