Advertisement
Guest User

Untitled

a guest
Jul 6th, 2015
207
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 1.04 KB | None | 0 0
  1. // some js here to make video responsive.
  2. function fluidVideo () {
  3. // get video container
  4. var videoContainer = document.querySelector('#video-container');
  5. // check we have it
  6. if (videoContainer) {
  7. // get container params
  8. var videoBox = videoContainer.getBoundingClientRect();
  9. // get actual video (typically an iframe/embed from vimeo or youtube)
  10. var video = videoContainer.querySelector('iframe');
  11. // check we have video
  12. if (video) {
  13. // only apply ratio once
  14. if (videoContainer.dataset.ratio == undefined) {
  15. // create aspect ratio
  16. var aspectRatio = video.height / video.width;
  17. // save as data on parent
  18. videoContainer.setAttribute('data-ratio', aspectRatio);
  19. // // remove attriburtes from video
  20. video.removeAttribute('width');
  21. video.removeAttribute('height');
  22. }
  23. // set new height
  24. video.style.height = (videoBox.width * videoContainer.dataset.ratio) + 'px';
  25. }
  26. }
  27. }
  28. // attach events on load and resize
  29. window.addEventListener('load', fluidVideo);
  30. window.addEventListener('resize', fluidVideo);
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement