Creating Click-to-View Media Elements

Last modified May 14, 2020

Click-to-view media elements, also sometimes referred to as hidden or reverse media, are not visible when the replica page is viewed initially, but must be opened with a hot area on the page. Since the video is hidden when the page displays, we recommend including a call to action in your page design which will be set with a link to display the video, for example, an icon or text that reads “Click here to Watch”:

1. Add the media element

Start by adding your audio/video to the page and style/position it to where you would like it to appear. Please refer to the general media placement instructions.

2. Hide the media element

While the element is selected, check the box labeled “Initially hidden” under the heading “Appearance.”

Note: If you preview the page, you won’t see the media element because you’ve hidden it by default and there is no way to view this element without completing the next step.

3. Find the Media Element Name

Select the media element and locate the “IDs” section in the right-hand editing panel, specifically the field labeled “Name.” This will be populated with a default value that comes from the file name and the time at which it was uploaded. Copy this value.

The name value in this example is: “rate-card_1398785883662″.

Note that the “Name” value is only visible in the Issue Editor, not to end users or for tracking, and may be changed if desired for ease-of-use. The only caveat for renaming is to make sure the value is unique within the issue.  (“Tracking Title” is used for analytics, and will match the name of the file, by default.)  

4. Create a Link to Unhide Element

Now you’ll need to create a link with a javascript function on the page to unhide the media element.  Make sure you have copied or noted the media element’s name per step 2, and then switch to the Linking tool tab (upper left corner).

Use the instructions for creating a new link in the desired “hot area” where your call to action is on the page. With the link highlighted (active), you will modify it as follows:

Set the type to “web URL” and then place the following javascript in “Destination” field:

 javascript:openPopup('[element name]')

replacing [element name] with the media element’s name value that you copied from the previous step (rate-card_1398785883662). In the example we’re using, the full javascript function is:

 javascript:openPopup('rate-card_1398785883662')

Note: this function is case sensitive, so if it doesn’t work check that you’ve typed it correctly.

In the “Mouseover Text” field you may enter custom text such as “Watch Video” to avoid the default behavior, which is to display the javascript function when a reader hovers over the link.

vs.

Need Help?
The Digital Help Desk is the process for communicating with GTxcel regarding new title setups, questions, and technical issues for the Web Reader and/or Apps.

You can submit a request to us through the Request Help button located in the Publisher Dashboard or call the support number: 800-609-8994, option 3.
Contact Us GraphicContact Support
8AM - 5PM EST
Monday to Friday
800-609-8994, option 3
Response Times
General Question/Requests – A Customer Success team Member will begin working on your request within one to two hours of receipt. We will complete the request as soon as possible; we aim to have all requests completed within 24 hours.