Examples: Launch URL

examples/launch_url

live demo

DataDocs is designed to help videos be more web native; in addition to interacting with web-based API data (see examples/simple_api) and supporting interactive graphics (see examples/dynamic_chart), DataDocs allows you to make the content of any of the divs in your <overlays> container into a button that opens a URL in a new window or tab, which automatically pauses the video for the user. In the current example, text divs are added to the video in the same manner as seen in the simple text example above. Each one is then tied to a specific URL using the addCaramel function, as explained below:

1. Once you have the text customized as you'd like in your dd_launch_url.html file, open up main.js. You'll see that for each of the divs in the original HTML file, there is a call to data_doc.addCaramel that has two parameters: url and target. Adjust these values so that for each div you'd like to link to a given URL, there is a data_doc.addCaramel call that has the div id as the target and the desired URL in the corresponding url field.

2. To make it clear to the user which pieces of text are clickable, we suggest that you apply some additional CSS to text divs that open URLs. In the dd_launch_url.html, try adding one of the following classes to your linked text divs: shadow, glow or outline. You'll find these classes in the css/dd_launch_url.css file, where you can feel free to customize them to suit your video's style. We suggest choosing a single style for linked text and sticking to it throughout an individual DataDoc.

3. Open up dd_launch_url.html in FireFox or Chrome on your computer, and check out your links' styles and functionality!