There are two main files:
templates/embedder-iframe.jsthat should be loaded by the host page,
media/src/js/embedder/embedder.jsthat includes most of the logic of the actual widget.
The host page must load
embedder-iframe.js and add a
div element with the
amara-embed class for each widget. Parameters such as the video URL and width are given as data attributes.
embedder-iframe.js is responsible for adding the widgets inside the
div element and resizing them as needed. It also observes and reacts to new elements added through AJAX.
When the host page is fully loaded, it performs the following actions:
- Searches for the
divelements on the host page with the
- Sets the size to the values specified in the URL parameters.
- Adds a spinning loading animated gif inside them.
- Adds an iframe inside each which points to an HTML file on the same domain. It adds to that URL the necessary parameters and also initializes a message listener. The page loaded in the iframe communicates with the hostapage with message, so they must be served on the same domain.
- When the iframe content is fully loaded, the loading gif is hidden so that the widget can appear.
- While the page is loaded, it constantly listen to messages from the page inside the iframe in order to be resized as needed, namely when the transcript viewer is expanded.
- It also listens to any added element inside the host page so that it can load an frame inside any dynamically added content during the whole life cycle.
The iframe added by
embedder-iframe.js loads a web page which basically is populated by
embedder.js. It is based on
jQuery. It includes a video player, managed by
popcorn.js and a custom menu. The menu controls the diplayed languages and is also used to toggle subtitles and the transcript viewer.
The dependencies can be found in
popcorn and the
For CSS, the sass file
embedder.scss must be compiled, and the CSS for
mCustomScrollbar must be loaded.