Hi there,

 

I came a cross a great website designed for a school. I'm not sure If Im allowed to post links so Ill refrain from going into detail about the website itself.

The design is of a video which takes up the whole page that is responsive to the size of the window. The video is the full size of the page then if you shrink the page size, the video shrinks with it so it stays full screen on the page.

 

I don't think the site is using percentages because I noticed that if I "inspect element" of the page.. THat the width and height of the video is changing whenever I change the window size. It change from -700px to -200px to whatever... I feel like there must be some code that is looping and checking to see if the window size has changed and it adjusts the pixels of the video if the window has changed...

Any ideas how I can implement something like this in my site? Could I use jquery for this?

 

-THanks!

   $(window).resize(function(){     resizeVideo();    });
      
    function resizeVideo(){                          
          vid.height=$(window).height();     
     
          var diff = (vid.width - $(window).width()) / 2;
          $('#my_video').css("margin-left",diff/2);
    }

So this is what I'm working with so far. Any mathematicians able to help with finding the right calculations to use?

 

EDIT

The Vid object I reference to in the code above

vid = document.getElementById("my_video");   

           <video id="my_video" autoplay>
                   <source src="vid.mp4">
           </video>

Edited April 19, 201610 yr by HighDarren

Did I ask the question in a bad way? Or am I just too pro for this forum?

 

Too Pro?

 

If you were Pro you'd know that you can scale the whole thing using some very simple CSS; no jQuery needed.

 

First Google SERP is this: http://www.codesynthesis.co.uk/tutorials/html-5-full-screen-and-responsive-videos

 

Now I'll get back to being amateur.

Thank for the link mate!

@@citypaul, your experience says "Nothing" in your profile :D

Are there any ways I can better manage aspect ratio of images when it comes to responsive design? Im using an image for the background but it looks strange if the browser is too wide or if it's too high because of it stretching.

Are there any ways I can better manage aspect ratio of images when it comes to responsive design? Im using an image for the background but it looks strange if the browser is too wide or if it's too high because of it stretching.

 

If it's for a background the bIackground-size property should help https://css-tricks.com/almanac/properties/b/background-size/

You can use CSS object-fit there's no need at all for any JavaScript. If you need to support older browsers it can too be done with CSS but is a little more convoluted as you need to do something like this

http://codepen.io/rbrtsmith/pen/bpZpOV