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
Drag an inline frame to the canvas as the container for the player, then adjust the frame to the desired size.
Set Video Source
1. Open any YouTube video, right-click video and select Copy Embedded Code.
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>
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