I'm making a web application where a background video is the main feature. I have managed to make the video fit the whole screen by getting some black bars on the sides to prevent the aspect ratio (i need the whole video to be shown I don't want parts cut off).
This is what happens when the width is not enough
This is what happens when the height is not enough
That's what I want it to do actually, there is only one issue. The message you can see on both pictures is from the plugin videojs-overlay that aligns messages where you want, in this case, top. And to align these messages it takes the whole viewport but not where the video is playing.
I want this to happen
This is my actual code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" media="screen" href="https://vjs.zencdn.net/7.5.4/video-js.css">
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="https://vjs.zencdn.net/7.5.4/video.js"></script>
<script src="https://vjs.zencdn.net/ie8/7.5.4/videojs-ie8.min.js"></script>
<link href="https://players.brightcove.net/videojs-overlay/2/videojs-overlay.css" rel='stylesheet'>
<title>Videojs Dailymotion</title>
<style>
* {
margin: 0;
padding: 0;
}
.videoContainer
{
position:absolute;
height:100%;
width:100%;
overflow: hidden;
}
.videoContainer video
{
min-width: 100%;
min-height: 100%;
}
.video-js .vjs-control-bar,
.video-js .vjs-big-play-button,
.video-js .vjs-menu-button .vjs-menu-content {
/* IE8 - has no alpha support */
background-color: #2B333F;
/* Opacity: 1.0 = 100%, 0.0 = 0% */
background-color: rgba(43, 51, 63, 0);
}
</style>
</head>
<body>
<video id="vid1" class="video-js vjs-default-skin videoContainer" controls >
<source src="https://drive.google.com/uc?export=download&id=1KhfURPSYOTjPVxIwWdicd5OHo651PaPy" type="video/mp4">
</video>
<script src="https://players.brightcove.net/videojs-overlay/2/videojs-overlay.min.js"></script>
<script>
var player = videojs('vid1',{
controls: true,
posterImage: false,
textTrackDisplay: false,
loadingSpinner: false,
controlBar: {
fullscreenToggle: false,
progressControl: false,
remainingTimeDisplay: false
}
});
player.overlay({
content: '<strong>Default overlay content</strong>',
overlays: [{
align: "top",
content: 'This event-triggered overlay message appears when the video is playing',
start: 'play',
end: 'pause'
}]});
</script>
</body>
</html>I have tried object-fits, fluid aspectRatio and nothing seems to work Another image to explain what I want to do:
I want the blue square to be the red square while mainteining the aspect ratio
