How to display a video player as a popup on click of a button?

gowri penkar shared this question 6 years ago
Answered

Hi... I am working on a prototype and I am stuck with a certain interaction.


I need to display a video player on the click of a button and there should be an option to close and dismiss the video player with a 'close window' kind of button.


Is there anyone who can help me out? Really need this urgently for an assignment I have to present soon.

Best Answer
photo

Here's how to create a pop-up video:

1. Drag a Button onto the Canvas and label it 'Show video'

2. Right click on the Button and click 'Group in Dynamic Panel'

3. Click on the '+' icon on the panel to add another panel, so that there are two panels

4. In this second panel, drag a Document widget and a Button. Label the Button 'Hide video'

5. Select the Document widget and select a video for it to display in the Properties palette

6. Click on the 'Hide video' button and create an "On Click" + "Set Active Panel" event, and select the first panel to be set as active

7. On this first panel, select the 'Show video' button, and create an "On Click" + "Set Active Panel" event, and select the second panel to be set as active

That's it! Check out the prototype here.

Comments (2)

photo
1

You have two ways to do so. One is to create a new screen, then place the video player there (for instance using an HTML widget and pasting a youtube embed html code). Then go back to the other screen and create an event like this: on click -> link to -> 'the screen with the video' -> open in a pop up window.


The other way is to drag a dynamic panel, place the video inside and the close icon you like. Then mark the entire dynamic panel as hidden (in properties) and create an event like this:


on click -> show -> dynamic panel

photo
1

Here's how to create a pop-up video:

1. Drag a Button onto the Canvas and label it 'Show video'

2. Right click on the Button and click 'Group in Dynamic Panel'

3. Click on the '+' icon on the panel to add another panel, so that there are two panels

4. In this second panel, drag a Document widget and a Button. Label the Button 'Hide video'

5. Select the Document widget and select a video for it to display in the Properties palette

6. Click on the 'Hide video' button and create an "On Click" + "Set Active Panel" event, and select the first panel to be set as active

7. On this first panel, select the 'Show video' button, and create an "On Click" + "Set Active Panel" event, and select the second panel to be set as active

That's it! Check out the prototype here.