Skip to content


Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?


Failed to load latest commit information.
Latest commit message
Commit time

VideoJS End Cards

Simple, customizable end card solution for VideoJS.

This plugin adds an end card container, which shows/hides based on the VideoJS's playing and ended events. By implementing the getRelatedContent function, it can display thumbnails for content your users might be interested in, and you can implement the getNextVid function to drive your users to a page after x amount of seconds.

The plugin is unopinionated on what kind of markup your thumbnails have - it just takes whatever you give it and appends it to the corresponding container div.

Fork the repo and take a look!


<script src=""></script>
<script src="videojs.endcard.js"></script>
// Sync or Async, you decide.
function getRelatedContent(callback) {
    var el = document.createElement("p");
    el.innerHTML = "So Cool You'll HAVE to Click This!"
        // Needs an array
    }, 0);

function getNextVid(callback) {
    var anchor = document.createElement('a');
    anchor.innerHTML = "Users will be taken to the VideoJS website after 10 seconds!"
    anchor.href = ""
    }, 0);

var video = videojs("video");
    getRelatedContent: getRelatedContent,
    getNextVid: getNextVid

Also, example.html is a more detailed demo.


Check out videojs.endcard.less for ideas on how to style the endcard. The default id's are in the options.



getRelatedContent : Required for display of related content. It must invoke the callback function, which takes an array of DOM Elements and appends them to the "related-content" container.

getNextVid : Required for autoplaying video. It must invoke the callback function, which takes a single DOM Element and appends it to the "next-video" container. When the countdown ends, the user is taken to the first anchor href that is found in the DOM Element passed to the callback function.

Styling Stuff:

  • endcard : id for the end card. Default = "player-endcard"
  • related : id for div containing related content thumbnails. Default = "related-content"
  • next : id for div containing the thumbnail for the upcoming video. Default = "next-video"
  • count : number of seconds until the next video. Default = 10
  • counter : id for the countdown number. Default = "counter"
  • countdown : id for the div containing the countdown. Default = "countdown"
  • countdown_text : text displayed for the countdown. Default = "Next video in:"