Home » Support Center » Knowledgebase / FAQs » Designer Pro » Using the Product » How to insert a video to play on a pop-up layer Xtreme PRO German Support
  How to insert a video to play on a pop-up layer
Solution

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 & Layers 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:-
popup: open "Video 1 (lock) (fade-in5) (fade-out5)" close "Video 2 (lock) (fade-in5) (fade-out5)" , "Video 3 (lock) (fade-in5) (fade-out5)" , "Video 4 (lock) (fade-in5) (fade-out5)"

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:-
popup: close

11. Select OK, then copy the text object and paste it on the other 3 pop up layers.


If you want your imported video to autoplay when the pop-up layer is opened:

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


The layer properties:

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 property is more essential in some scenarios rather than others depending on how the popup layer is invoked. In the example we've provided we require (lock) to be applied so that by clicking outside of the pop-up layer does not cause the pop-up layer to close. In other scenarios you may not need to close other layers, so the pop-up layer can be invoked by using the Link to Pop-up layer drop down box to open the layer.

(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.



Article Details
Article ID: 2889
Created On: 19 Aug 2010 11:09 AM

 This answer was helpful  This answer was not helpful

 Back
 Log in  
Email address:
Password:
Remember Me:
 
 Search on keyword
Search Tips
Search on single keywords such as XML4, or use + and - to narrow the search eg. NavBar + Xtreme
 Article Options


Dedicated Xara forums, available 24 x 7 - a great place to get quick answers to your questions or just to see what others are talking about.



A host of excellent support resources for Xara products, including more than 10 years of Xara Xtreme/Photo & Graphic Designer/Designer Pro and Web Designer tutorials and Hints & Tips.