I'm struggling to center and resize the video.js on my page. I want it to be responsive and never go beyond the boundaries of the headers and footers. My goal is to replace the black square with a larger video, but still fit within the header and footer. Ideally, I'd like the video.js control bar to align exactly with the footer with the same width. Can anyone help me find a good solution? Thank you!
https://i.sstatic.net/lrkoo.png
html:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>title</title>
<link href="//vjs.zencdn.net/6.6.3/video-js.min.css" rel="stylesheet">
<script src="//vjs.zencdn.net/6.6.3/video.min.js"></script>
<script src="http://reference.dashif.org/dash.js/nightly/dist/dash.all.min.js"></script>
<script src="https://github.com/videojs/videojs-contrib-dash/releases/download/v2.9.1/videojs-dash.min.js"></script>
<style type="text/css">
.video-js .vjs-current-time { display: none; }
.video-js .vjs-time-divider { display: none; }
.video-js .vjs-duration { display: none; }
.video-js .vjs-progress-control { display: none; }
.video-js .vjs-remaining-time { display: none; right: auto;}
body,html{
margin:0;
padding: 0;
background-color: white;
}
* {
box-sizing: border-box;
}
.head {
position: relative;
display: block;
padding: 8px;
float: left;
}
.head:after {
content: "";
display: table;
clear: both;
}
.left {
width: 75%;
background-color: #FF5A00;
}
.right {
width: 25%;
background-color: #FFFFFF;
}
img {
vertical-align: middle;
}
.cent
{
height:50px;
width:50px;
background-color:black;
margin:auto;
position:absolute;
left:50%;
top:50%;
margin-left:-25px;
margin-top:-25px;
}
.footer {
position: absolute;
right: 0;
bottom: 0;
left: 0;
padding: 1rem;
background-color: #efefef;
text-align: center;
font-family: 'titles', Fallback, sans-serif;
font-size: 100%;
font-weight: normal;
letter-spacing: 1px;
}
</style>
</head>
<body>
<div header="head">
<div class="head left">
<img src="logos.png" alt="logo" height="20">
</div>
<div class="head right">
<img src="logos.png" alt="logo" height="20">
</div></header>
<div class="cent">
<video id=tv-video class="video-js vjs-fluid vjs-default-skin vjs-show-big-play-button-on-pause vjs-big-play-centered" controls autoplay preload="auto"></video>
<script>
var player = videojs('tv-video');
player.src({ src: 'video/manifest.mpd', type: 'application/dash+xml'});
player.play();
player.on("pause", function () {
player.one("play", function () {
player.src({"type":player.currentType(), "src":player.currentSrc()});
player.play();
});
});
</script>
</div>
<footer class="footer"><img src="firma.png" alt="logo" height="20"></footer>
</body>
</html>