Skip to content

Instantly share code, notes, and snippets.

@Nateowami
Last active November 7, 2018 22:43
Show Gist options
  • Star 2 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save Nateowami/7a947e93f09c45a1097e783dc00560e1 to your computer and use it in GitHub Desktop.
Save Nateowami/7a947e93f09c45a1097e783dc00560e1 to your computer and use it in GitHub Desktop.
JS function to calculate the active are of an HTML5 video (i.e. the are of the element that is showing the video).
function videoDimensions(video) {
// Ratio of the video's intrisic dimensions
var videoRatio = video.videoWidth / video.videoHeight;
// The width and height of the video element
var width = video.offsetWidth, height = video.offsetHeight;
// The ratio of the element's width to its height
var elementRatio = width/height;
// If the video element is short and wide
if(elementRatio > videoRatio) width = height * videoRatio;
// It must be tall and thin, or exactly equal to the original ratio
else height = width / videoRatio;
return {
width: width,
height: height
};
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment