Edit: I am still totally unable to fix this issue and could use some help! I’m having a hard time explaining what I need help with
I made a slideshow style series of videos for my product page using no JS. I isolated this part of the product page into a seperate pen to make is easier to work on. I’ve gotten it to a point where the videos and controls are responsive, and the element behind it is responsive, but I can’t make them responsive together.
I need the slider to occupy space in the flow of the page so that I can set the parent background < section > height to auto so that the height of the section is wrapped around the slider and adjusts as the slider changes sized. The slider is an absolute element, in a relative element, in an absolute element, in a relative element. I need the slider to physically exist in the flow of the design.
trying to understand… the width of the ‘yellow’ section and the video inside looks responsive from what I can tell. Was the problem only the height?
(or were you wanting the yellow section to grow further so it fills most of the available width when the browser is bigger?)
I find CSS confusing, so there may be a better or cleaner way to approach this, but this ought to work:
-by definition, absolutely positioned elements are removed from the normal flow of the document. So in order to have the video element’s height control how much vertical space gets taken up by your yellow background, you’ll need to switch it back to relative positioning.
-however, if you change all your videos to relative positioning, they’ll appear in a long stack because they’re back in the normal flow of the document
-so set just the first video to relative positioning, and use absolute positioning for the subsequent videos. The first video will control the height of the yellow background, and subsequent videos won’t take up additional space in the document.
-you’ll probably need to add a bottom margin to the first video to get the sizing just right