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’ve sketchy made my 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 more needed attributes width and height for the video tag. Although if you want to stretch the video you may need to apply


style="height:auto; width:100%"

Screen Shot 2017-08-22 at 23.58.15.png

https://github.com/rudkovskyi/videojs_popup/issues/1

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s