Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- // some js here to make video responsive.
- function fluidVideo () {
- // get video container
- var videoContainer = document.querySelector('#video-container');
- // check we have it
- if (videoContainer) {
- // get container params
- var videoBox = videoContainer.getBoundingClientRect();
- // get actual video (typically an iframe/embed from vimeo or youtube)
- var video = videoContainer.querySelector('iframe');
- // check we have video
- if (video) {
- // only apply ratio once
- if (videoContainer.dataset.ratio == undefined) {
- // create aspect ratio
- var aspectRatio = video.height / video.width;
- // save as data on parent
- videoContainer.setAttribute('data-ratio', aspectRatio);
- // // remove attriburtes from video
- video.removeAttribute('width');
- video.removeAttribute('height');
- }
- // set new height
- video.style.height = (videoBox.width * videoContainer.dataset.ratio) + 'px';
- }
- }
- }
- // attach events on load and resize
- window.addEventListener('load', fluidVideo);
- window.addEventListener('resize', fluidVideo);
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement