put video on blackground
After years of experience I got a script that works for me
in HTML CODE INSERTION (Web properties / HTML head)
* {
margin: 0; padding: 0;
}
#container {
overflow: hidden;
height: 400px;
background: # edeae8;
position: relative;
}
video {
position: absolute;
/ * Vertical and Horizontal center * /
left: 50%; top: 50%;
transform: translate (-50%, -50%);
}
<div id = "container">
<video autoplay muted loop>
<source src = "http://neoclick.es/animaciones/1.mp4" type = "video / mp4">
</ video>
</ div>
and we create a js (scrpt.js):
var video = document.querySelector ('video')
, container = document.querySelector ('# container');
var setVideoDimensions = function () {
// Video's intrinsic dimensions
var w = video.videoWidth
, h = video.videoHeight;
// Intrinsic Ratio
// Will be more than 1 if W> H and less if W <H
var videoRatio = (w / h) .toFixed (2);
// Get the container's computed styles
//
// Also calculate the minimum dimensions required (this will be
// the container dimentions)
var containerStyles = window.getComputedStyle (container)
, minW = parseInt (containerStyles.getPropertyValue ('width'))
, minH = parseInt (containerStyles.getPropertyValue ('height'));
// What's the min: intrinsic dimensions
//
// The idea is to get which of the container dimension
// has a higher value when compared with the equivalents
// of the video. Imagine a 1200x700 container and
// 1000x500 video. Then in order to find the right balance
// and do minimum scaling, we have to find the dimension
// with higher ratio.
//
// Ex: 1200/1000 = 1.2 and 700/500 = 1.4 - So it is best to
// scale 500 to 700 and then calculate what should be the
// right width. If we scale 1000 to 1200 then the height
// will become 600 proportionately.
var widthRatio = minW / w
, heightRatio = minH / h;
// Whichever ratio is more, the scaling
// have to be done over that dimension
if (widthRatio> heightRatio) {
var newWidth = minW;
var newHeight = Math.ceil (newWidth / videoRatio);
}
else {
var newHeight = minH;
var newWidth = Math.ceil (newHeight * videoRatio);
}
video.style.width = newWidth + 'px';
video.style.height = newHeight + 'px';
};
video.addEventListener ('loadedmetadata', setVideoDimensions, false);
window.addEventListener ('resize', setVideoDimensions, false);
http://neoclick.es/animaciones/index1.htm
font:https://codepen.io/rishabhp/pen/wGLjwK
