Last active
May 20, 2018 05:59
-
-
Save miguelmota/6b2ec8c9bbd38c99c340 to your computer and use it in GitHub Desktop.
Video scale transform
This file contains hidden or 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 updateScale() { | |
| var $videoContainer = $('.video-container'); | |
| var $video = $videoContainer.find('video'); | |
| var containerWidth = $videoContainer.width(); | |
| var containerHeight = $videoContainer.height(); | |
| var mediaAspect = 16/9; | |
| var containerAspect = containerWidth / containerHeight; | |
| var transformOrigin = '50% 50%'; | |
| var scale = (containerAspect < mediaAspect) ? (mediaAspect / containerAspect) : (containerAspect / mediaAspect); | |
| $video.css({ | |
| 'transform': 'scale('+ scale +')', | |
| 'transform-origin': transformOrigin, | |
| }); | |
| } | |
| $(window).on('resize.bg-video', updateScale); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
$(window).on('resize.bg-video', updateScale);I'm a little confused at what this does- are you scoping the resize event down to the .bg-video element?