Streaming live at 10am (PST)

Video Overlay Sizing


#1

Hi,

I have a part of a website I’m developing where there is a ‘swoosh’ that overlays a container (this will trigger a video in a lightbox).

http://video-overlay-test.webflow.io/

Pretty happy so far, but I’m stumped as to how I can get the sizing to remain consistent - so it stays the same height across the container at all screen widths. I could insert a bunch of media queries to keep adjusting the top margin, but I’m thinking there must be a better way, possibly using css calc? Or some Javascript?

Cheers,
Jack


Here is my public share link: LINK
(how to access public share link)


#2

looks like its working fine for me. did you find the solution?


#3

Yep it seems to be working well enough! moves a little but it’s decent enough. Some media queries can take care of smaller devices where it breaks a bit.

It is breaking pretty badly in Safari for some reason though? Can’t figure out why… fine in Chrome and Firefox…


#4

This topic was automatically closed 125 days after the last reply. New replies are no longer allowed.