0
Ich brauche eine Möglichkeit, um VideoJS eine Lightbox zu öffnen und sie reaktionsbereit zu halten. Ich habe den folgenden Hilfscode gefunden: https://github.com/rudkovskyi/videojs_popup. Perfekt! Außer, wenn ich es mit der neuesten Version von Videojs benutze, funktioniert es nicht richtig. Ich bekomme:Videojs Responsive Lightbox funktioniert nicht
VIDEOJS: ERROR: Improper value "auto" supplied for for width
video.js:489 VIDEOJS: ERROR: Improper value "auto" supplied for for height
in der Konsole und es endet teilweise brechen. Code hier:
<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">
<!-- jQuery 1.7.2+ or Zepto.js 1.0+ -->
<!--<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>-->
<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>
<!-- Magnific Popup core JS file -->
<script src="js/jquery.magnific-popup.min.js"></script>
<meta content="">
<style></style>
<script>
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();
})
})
</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>
Ich habe versucht, mit verschiedenen CS und VideoJS Eigenschaften, aber keine Freude zu fummeln. Hier ist das Beispiel aus dem Entwickler des Popup-Skripts, das funktioniert: https://cdn.rawgit.com/rudkovskyi/videojs_popup/master/demo.html, aber ich denke, es ist eine ältere Version von videojs (nicht akzeptabel).