Skip to content

Instantly share code, notes, and snippets.

@robpataki
Created November 25, 2014 18:57
Show Gist options
  • Save robpataki/8aeaa82dea24f1ca9f11 to your computer and use it in GitHub Desktop.
Save robpataki/8aeaa82dea24f1ca9f11 to your computer and use it in GitHub Desktop.
This script will always make sure that the video is covering the browser window and it is centred, whilst the aspect ratio is maintained.
function resizeVideo() {
var videoEl = document.getElementsByTagName('video')[0];
var videoOriginalWidth = 854;
var videoOriginalHeight = 480;
var videoRatio = videoOriginalWidth/videoOriginalHeight;
var winWidth = window.innerWidth;
var winHeight = window.innerHeight;
var videoWidth;
var videoHeight;
var videoDimensionMultiplier = 1.1;
// Calculate the video dimensions based on the window dimensions
videoWidth = Math.ceil(winWidth);
videoHeight = Math.ceil(videoWidth / videoRatio);
if(winWidth / winHeight < videoRatio) {
videoHeight = Math.ceil(winHeight);
videoWidth = Math.ceil(videoHeight * videoRatio);
}
// Multiply the calculated values (to cover off gaps around edges for instance)
videoWidth *= videoDimensionMultiplier;
videoHeight *= videoDimensionMultiplier;
// Set the dimensions and positions of the video element
videoEl.style.width = videoWidth + 'px';
videoEl.style.height = videoHeight + 'px';
videoEl.style.left = 0.5 * (winWidth - videoWidth) + 'px';
videoEl.style.top = Math.floor(winHeight * 0.5 - videoHeight * 0.5) + 'px';
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment