MY SITUATION:
I’ve uploaded a series of super short 1080 x 1920 (16:9) background videos that will basically function as looping GIF’s minus the large file size and poor image quality. The background videos are setup within a div, and the div is contained within a section. Each section contains its own visual (e.g. looping video or static image) and/or copy. The sections are all contained within a container.
MY PROBLEM
From a responsive design standpoint, I’m unable to get all of my visuals (e.g. looping videos, static images) to scale responsively to window/viewport size changes while maintaining the 16:9 ratio of my visuals AND the original margins between all sections. I’ve attached some screenshots, one of which shows the video looking good on desktop view, while the other video looks cutoff and terrible on my phone view.
THINGS I’VE ALREADY TRIED:
I found this prior thread from 2019 and I tried inserting the custom code into my head section like the person recommends, which worked for this person (and apparently many other people on this thread), but it did nothing for me.
I’m stuck! Any help would be greatly appreciated. Hopefully I was detailed enough. I’ll leave a link to my website so you can maybe try to see what I’ve done wrong and/or how I can fix this.
PS: I’m very new to all of this so that’s maybe why I’m struggling a little.
The solution is to provide alternative content for devices where your 16:9 aspect ratio does not work. You could hide the element and replace it with an image, or you could leverage alternate media. Cloudinary has a solution where video is auto-cropped and formatted for different devices. That won’t help with text-overlays however.
@webdev thank you. So are you suggesting to add the same element 4 times (e.g. 4 of the same space shuttle videos shown in my screenshots here except with different dimensions—one for each breakpoint) and simply hide 3 and show 1 for each successive breakpoint? And then do this for all elements on the page?
My follow-up questions:
Wouldn’t that (1) overburden the page with too much loading material; and (2) it will still cutoff the images from the sides until you reach the next breakpoint, right?
So there’s no possible way to get my videos to auto continuously scale down and up (to the point of the max container width of 1080px)? (as opposed to simply resizing 4 times at each of the 4 breakpoints)?
Hey @webdev. Thanks for the link. I tried implementing the suggested fix from that article, which involved setting width to “100%” and height to “Auto”, but all it did was make my content disappear. It seems like a logical fix, but for whatever reason it’s not working on my content?
See the attached screenshots for to see what happened.
I appreciate you taking the time to create that video, @webdev (videos tend to be the most effective way to show me how to do things as they clear out most of the ambiguity in written responses).
Unfortunately, the end result isn’t what I’m looking for here. Your method effectively hides all of the videos on the page rather than making them responsive as you say. Everything else looks great, though (the solo yellow image, the grid images, and the text). But the videos have disappeared completely.
I’ll add a screenshot here to show you what the video size looks like by the end of your tutorial so you know exactly what I mean.
Was in too much of a hurry to make dinner for a special someone. If you add back to 100% width on the “.div-content” element they should all be visible again.
Uh oh! @webdev One last issue I ran into. It seems to work when resizing the window manually by pushing and pulling the window with the cursor to the left and right. But this only works inside the design editor. I published the content and opened the live page and it no longer worked as it did inside the design editor and the edges got cutoff again. It also didn’t work when I tried to resize it within the design editor using the device size buttons at the middle top (again edges got cutoff).
Hey @webdev checkout my video below to see how the issue has not been resolved. It shows how it’s not working within the designer preview and also within the actual live published site. I then also point out that the custom code that I added to the Head section is strangely showing up in the header of my published site. Lastly I run through each of the embedded videos to show their settings in order to give you a view as to what might be wrong.
Please let me know as this is the final piece of the puzzle that I’m trying to solve! Thanks @webdev !
I can’t make changes and publish your project so I may have missed a step. Here is a project showing a background video placed in an element responsively at 16:9 ratio.
This is cool Nelson, thanks for sharing man, is this official W3C or custom Webflow centric CSS? does it work with things like Academy ratio - Wikipedia (1.37:1), and others: Aspect ratio (image) - Wikipedia ? I only ask because many are not straight integer relationships and involve a floating point.
Not really @webdev as that’s how web standards should work, but on Webflow they don’t.
For clarity I was questioning why Nelson or any of us have to rely on multiple classes to target <video> and why? .
