How to insert a video to play on a pop-up layer
Links on web pages do not only have to link to other webpages, they can link to show hidden layers within the same page, for example to show a layer which contains a video, photo, iframe or any other content.
Please download the accompanying Example.web file that demonstrates the end result of this guide.
In this example we'll give instructions to create 4 layers, with videos on each and show how to switch between them:
1. Open Page & Layer Gallery, select the Layers button, then New. Call this layer Video 1 (lock) (fade-in 5) (fade-out 5)
2. In the Video 1 layer import a video onto the page and position it as required.
3. Follow steps 1 - 3 to create the next 3 layers, calling them Video 2 (lock) (fade-in 5) (fade-out 5) , Video 3 (lock) (fade-in 5) (fade-out 5) and Video 4 (lock) (fade-in 5) (fade-out 5)
4. Hide all 4 Video layers and make the MouseOff layer visible.
5. Insert 4 text lines Video 1, Video 2, Video 3 and Video 4
6. Select Video 1 text line and press Ctrl + Shift + W to open Web Properties
7. In the Link to Web or Email Address field type the following:-
8. Do the same for the text lines Video 2, Video 3 and Video 4 changing the popup layer names appropriately to open and close the correct layers.
9. You may also want to close the popup that you have open without opening another popup. To do this make the Video 1 layer visible and editable and create a text line called Close. (in the example provided we have created a close icon which performs this function)
10. Select it and press Ctrl + Shift + W and enter the following into the Link to Web or Email Address field:-
11. Select OK, then copy the text object and paste it on the other 3 pop up layers.
1. Select the video and press Ctrl + Shift + W and go to the Placeholder tab.
2. Scroll through the HTML text and you will find 2 entries for autoplay=
3. Change both entries to read autoplay=true
4. Click OK
These add properties and attributes to the layer which can alter its behaviour
(lock) makes the rest of the page (apart from the other hyperlinks) unclickable when the layer is open.
This was replaced by built in options within the program in version 8
(fade-in 5) This attribute is optional, it gives the layer a fading in transition when it's loading. If it is not applied then the video will open immediately without a transition. The number represents the fade in speed and can be changed to suit individual requirements between 1 and 5. (1 is slowest - 5 is fastest)
(fade-out 5) This attribute is optional, it gives the layer a fading out transition when it's closing. If it is not applied then the video will close immediately without a transition. The number represents the fade out speed and can be changed to suit individual requirements between 1 and 5. (1 is slowest - 5 is fastest)
Please note that (fade-in ) and (fade-out ) do not have to be used together. A layer can fade in with transition and close immediately without one and vice-versa.
This was replaced by built in options within the program in version 7.
This article applies to:
If you are using Web Designer or Designer Pro version 8 or newer, then please see this article for an updated article [LINK TO ADD]