Last active
November 7, 2018 22:43
-
-
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).
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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