0

I want to create an element containing a video that responsively changes its height and width based on the current height and width of the monitor it is displayed on. This should be equal to like 100vh (both width and height). The problem is that this said element lies UNDER a navigation bar with position: relative set. So the script I'm already looking for a good week should change the width and height of this element AND video to fit in 100vh and width from under the navbar to the end of viewed screen. When scrolling down this element (or better said section) should behave just as every other, normal section: It is supposed to scroll up and giving the next section the opportunity to catch daylight.

I really appreciate concepts of realizing this in JavaScript, jQuery or any other script based language you feel familiar with. Thank you in Advance!

chazsolo
  • 7,873
  • 1
  • 20
  • 44
F9lke
  • 85
  • 1
  • 2
  • 8
  • Is the nav bar sticky at the top of the page as you scroll down, then? – cjl750 Aug 14 '17 at 17:41
  • 1
    Is this what you're asking? https://stackoverflow.com/questions/90178/make-a-div-fill-the-height-of-the-remaining-screen-space – c2huc2hu Aug 14 '17 at 17:56
  • @cJil750 The navbar I was talking about is not sticky, but when you scroll down, there is actually a second navbar that becomes sticky after scrolling over it. – F9lke Aug 14 '17 at 18:22
  • @user3080953 Unfortunately, that is not what I was asking for: The page you linked me, dealt with the content, filling excactly between a navbar and a footer. I am looking for a script that detects the current height between the topper navbar and the end of viewed screen when loading the page and fills in this pixel amount to guarentee my element to fill in this gap. Thank you for your answers! – F9lke Aug 14 '17 at 18:25
  • I still don't see why you would want to set the height in JS instead of using CSS. Anyways, would something like `window.innerHeight - $('#navbar').height` work? Consider posting a demo to better describe what you're trying to do – c2huc2hu Aug 14 '17 at 18:54

0 Answers0