I am looking for a solution to display VideoJS in a lightbox while keeping it responsive. I came across this helpful code snippet: https://github.com/rudkovskyi/videojs_popup. It seemed perfect until I tried using it with the latest version of Videojs and encountered some issues:
VIDEOJS: ERROR: Improper value "auto" supplied for width
video.js:489 VIDEOJS: ERROR: Improper value "auto" supplied for height
These errors showed up in the console and caused it to break partially. Below is the code snippet where the problem occurs:
<html>
<head>
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://vjs.zencdn.net/6.2.5/video-js.css" rel="stylesheet">
<!-- Magnific Popup core CSS file -->
<link rel="stylesheet" href="css/magnific-popup.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://vjs.zencdn.net/6.2.5/video.js"></script>
<script src="js/jquery.magnific-popup.min.js"></script>
<style>
.video-js .vjs-tech {
position: relative;
height: inherit;
}
.player {
width: 80%;
margin-left: auto;
margin-right: auto;
background:black;
}
</style>
</head>
<body>
<div class="galleryItem">
<a href="#test-popup" class="open-popup-link">test</a>
<div id="test-popup" class="player mfp-hide" style="color:#FFF">
<video id="example_video_1" class="video-js vjs-default-skin" controls preload="metadata" width="auto" height="auto" style="width:100%" data-setup=''>
<source src="http://vjs.zencdn.net/v/oceans.mp4" type='video/mp4' />
<p class="vjs-no-js">To view this video please enable JavaScript, and consider upgrading to a web browser that <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a></p>
</video>
</div>
<h3>One</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent euismod ultrices ante, ac laoreet nulla vestibulum adipiscing.</p>
</div>
</body>
</html>
I have experimented with different CSS and VideoJS properties but haven't had any success so far. The developer's example from the popup script works, but it seems to be using an older version of Videojs which is not acceptable. Here is the working example: .