I’m new to Webflow and not a particularly experienced coder. I know html and CSS, but can’t really “problem solve” in either language.
I am working out the kinks of learning WF before designing the full prototype of my portfolio. I wanted to create a more complex animation for my hero banner, so made a video in After Effects to play as a Background Video.
I am having 2 issues. I have searched extensively through the WF forum archives, tried a variety of settings and code injections, but none of the other posts seem to resolve my troubles.
Here are the issues (these have been asked before, but I the solutions provided have not worked):
Getting the background video to be full-width in both web and tablet.
—Rather than responsively sizing, the background video just seems to zoom in and cut off the content. I’ve tried ALL of the suggestions I can find on WF forums and none seem to work.
—I know the background video won’t show on mobile, and I know how to replace the videos with images in those cases, but the video I created will not situate to full-width on either web or mobile.
Getting the background video to stop on the final frame of the video, not loop over and over.
—There are several “fixes” posted here, and I’ve followed them to a ‘t’, but none of them have worked for me.
I would be extremely grateful for guidance. New to webflow and can generally figure my way out of most problems, but this one is persistent.
For your first question, if you mean that you want to maintain the aspect ratio of your video, I haven’t tested this but it should work, you should be able to add top padding as a %. When you do this, css calculates it as a percentage of the elements width (aka an aspect ratio)… So, for example, if you wanted the div block to have a 16:9 ratio, you would set the top-padding to 56.25%.
As for the second problem, it would probably require some custom code based on the YouTube embed documentation.
Unfortunately, changing the padding did not solve the problem. The bkg video is still not responsive. In full screen, the entire width of the video is visible, but any changes to the size of the viewport (or different device settings in tablet or mobile) makes it so the width of the video is cut off. The entire height of the video is shown in all cases, however.
As for the second question, the video is not hosted on Youtube, but is an uploaded video that I am using as a background video in the hero banner. Background videos normally loop, and while there are several different code additions that people have recommended using for stopping the loop, none of them are working for me. Would you happen to know how I could accomplish this with additional code? (I’m hoping that the video stops on its final frame and stays that way.
