Skip to content
Plugin for VideoJS to render YouTube annotations.
JavaScript Shell
Branch: master
Clone or download
afrmtbl Merge pull request #2 from omarroth/fix-resize
Use 'playerresize' for updating annotations
Latest commit 2204417 Apr 16, 2019
Type Name Latest commit message Commit time
Failed to load latest commit information.


Plugin for VideoJS to render YouTube annotations.



<!-- VideoJS automatically places the video in a <div id="avideo"></div> -->
<video id="avideo" class="video-js"></video>
<!-- include the styles -->
<link rel="stylesheet" type="text/css" href="dist.min.css">


const annotationXml = `
<?xml version="1.0" encoding="UTF-8" ?>
    <annotations> ... </annotations>

const video = videojs("avideo");
const videoContainer = document.getElementById("avideo");
video.ready(() => {
    videojs.registerPlugin("youtubeAnnotationsPlugin", youtubeAnnotationsPlugin);
    video.youtubeAnnotationsPlugin({annotationXml, videoContainer});

Click Events

Each time an annotation that has a link attached to it is clicked, the event __ar_annotation_click is fired on window, with e.detail.url set to the url.

e.detail also includes seconds if the link that was clicked on is a video with a timestamp hash (#t=38s).

window.addEventListener("__ar_annotation_click", e => {
    const url = e.detail.url;
    // redirect to the url
    window.location.href = url;
    // or provide a custom redirect
    // window.location.href = `${url}`;
You can’t perform that action at this time.