Responsive lightbox with VideoJS

Most of you who have used SublimeVideo player know that unfortunately, the company has shut down recently, though all that matters their player hosted on their servers is available only until the 12th of September, 2015. Which means, to many of us arose a problem to find out a solution that would work at least on the same level.

What is outstanding in the SublimeVideo for me, it’s the lightbox that I believe many of us would love to keep with a new replacement of favorite Sublime.

I searched over the internet if there’s a video player with a popup, lightbox or something similar and I found few examples but all of them have been lacking whether responsiveness or wasn’t stable enough for me.

Here I made my sketchy implementation of it using magnific-popup and videojs. You’re welcome to commit and share.

JavaScript

videojs.options.flash.swf = "video-js.swf";

$('document').ready(function(){
  $('.open-popup-link').magnificPopup({
    type:'inline',
    midClick: true
  });

  $('.open-popup-link').on('click',function(){
    videojs('example_video_1').play();
  });
})

CSS

.video-js .vjs-tech {
  position: relative;
  height: inherit;
}

.player {
  width: 80%;
  margin-left: auto;
  margin-right: auto;
  background:black;
}

And you are welcome to share and leave comments below, it’s completely free 😉

Example available here
Source code

[23/08/2017 UPDATE] With the latest VideoJS you no longer need attributes width and height for the video tag. If you want to stretch the video you may want to apply it, though.