There is a video embed on the homepage that doesn’t shift responsively. It lays out well when the window is 1140 pixels or bigger. When I make my browser window any smaller, regardless of Chrome or Safari, the video will shift up and leave a noticeable gap between banner and the section that follows. The gap will only increase as the window gets smaller.
@InfoTS.
Can you please provide us the link to preview your project in webflow. Instructions can be found at the top of the main forum page.
Sean
@seank Yes, thanks for inquiring about this. Here’s the link: https://boiling-headland-8523.herokuapp.com/.
What about the webflow file. Please see the instructions at the top of the forum on how to past your webflow project link.
@seank Here it is: http://cp-alpha.webflow.io/.
Hi @InfoTS, thanks for the published site link, that is needed for sure. Also what is needed is the site design read-only link: https://help.webflow.com/faq/how-do-i-share-my-sites-read-only-link
Check this article for needed info: Posting Guidelines for the Design Help Category - General - Forum | Webflow
Thanks for sharing the article,@cyberdave. I was looking up what’s needed, but I couldn’t find it for some reason. Here is the link: https://preview.webflow.com/preview/cp-alpha?preview=81f7ae4c6b66921d1587f8b8acdb9e36.
Hi @InfoTS, thanks for the read-only link. I can see you are using a 1920x1080 video, which is resizing when the viewport gets smaller.
For bg video, there is not a native “background-cover” option for videos built into the Webflow designer, but with a little custom code added to the Footer of the site, and some changes in the way you are creating the embed, you can achieve this background cover so there is no gap.
I have tested this on the following jsFiddle and it seems to work for me just fine: Edit fiddle - JSFiddle - Code Playground
To add the custom code, check this article: Custom code in head and body tags | Webflow University. Add the custom javascript surrounded by <script></script> tags, just like you have done with the script that is calling the modal windows.
Regards,
Dave
Belated follow-up on my end.
I tried adding the HTML portion of what’s shared in jsFiddle, but that didn’t pan out as the video became a video player. The thing is I don’t know how to implement the JQuery and CSS end of things, which may have led to the video not rendering in the way you suggested. That said, I’m actually not sure which custom code you’re recommending that I add to my project, such that it would allow the viewport to size according to the browser size.
(Thanks for the custom code article, btw. I had a handle on this.)
Hi @InfoTS, that is strange, I did not get any player controls when I added that custom code… I will check this again and get back to you asap.
Regards,
Dave
Thanks @cyberdave! Wanted to follow up on this. I’ve found that it also renders poorly on Safair.
Your advice would be appreciated.
This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.