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.
Contact Support