Fullscreen background video problem

Hi,

I m trying to make background video in hero section allways to fill the screen. http://agencija.webflow.io

Which is the best way to do it? I check few solutions on forum but somehow unsuccessful.

If anyone can help me with this I will really apriciate it :smile:

thank you,

Ziga

min-width:100%
min-height:100%

If it doesn’t work come back with a public link and I’ll make a screencast of how it should be set :slight_smile: Took me a little moment to make it work the first time.

hey Vincent hi!

I do not have min-width or min-height option to set to “%” the only unit is “PX”

(hovever I can type % but it is not working also …)

here is the read only link if this can help https://preview.webflow.com/preview/agencija?preview=e93f7cf8a889c0078cafa50ff1aff67a

thanks!

Hi,

  1. I m trying to make background video in hero section allways to fill the screen. http://agencija.webflow.io2 Which is the best way to do it? I check few solutions which I found on forum but somehow unsuccessful.

  2. we have 3 videos, which we would like to be be randomly played each time visitor comes on our website. how to do that?

  3. I would like video to stop playing when it is finished. curently it is looping. How to fix that?

  4. if the video will not play on mobile devices, I would like background image to bo displayed. How to do that?

  1. Google Chrome – Tapes
  2. with a developer and some javascript code
  3. remove the “loop” in the embed code
  4. make the whole HTML widget not appear on mobile (settings tab) and add a background to the parent div. Also, set a poster HTML video poster Attribute
1 Like

Hey Vincent U are the best!

  1. solved :smile:
  2. ok will ask developer for help
  3. solved :smile:
  4. if I add the background to the parent div, the background photo is covering the video, so this is not OK.
    4-a. I just inserted the link to the poster in the embeded html is that OK?

5! now, vertical and horizontal scroll apeared on the website, which is not OK, how to solve this? probably because min.width is 100% and the video is wider?

4 it’s because you’ve put a weird z-index=-1 into your custom code maybe; try removing it. The background of a parent element shouldn’t affect descendents.

BTW, you can add % values even when the UI don’t allow you to. Just type them and enter. You can even use values in vh or vw.

if I remove the z-index=-1, the video is overlaying all the content of the hero section. so this is not OK

I noticed I can put values in, but I was not shure if they work.

I can not get rid of the scroller bar :frowning:

add positive z-index to the content that has to be on top

Vincent, thank you soo much, you help me solve this mystery. I cant tell how grateful I’m for your help :smile:
If you ever come to Ljubljana let me know, I’ll buy you a beer and you can be my guest.

1 Like

however there is one minor problem still present … a scroll bar appears at some brovser resolutions, and when that happens, the whole content of the site can be scroled to the left, which is bad.

check this out http://agencija.webflow.io

any ideas how to fix this?

Select the Hero section and set it to this:

http://vincent.polenordstudio.fr/snap/lx4ih.jpg

Cool that you solved some mysteries… I actually DO come to Ljubljana sometimes because I have friends living there, so start to save for this beer (; I had noticed your texts were Slovenians :slight_smile:

1 Like

GREAT! now it is perfect. many thanx, looking forward for those beers. You are welcome :smile:

1 Like

iPad landscape issiue needs to be fixed

on this site we have a video BG http://agencija.webflow.io
on mobile devices video is not playing so it is replaced with bg photo in the hero section. which is all good, but on iPad landscape, there is no photo.

Probably because the max tablet wide that can be set in webflow is 991px and iPad landscape is 1024px wide if I’m not mistaking.

any idea how to fix this?

Did you do this? …

no I didnt, it will not solve the whole thing, maybe just photo. But there are also elements with css styles that needs to be same as tablet portrait in my webflow settings …

i think the right way would be somewhere here as Dave sugested.

@media (max-width: 1024px) { ... add css styles for elements when the screen is at ipad width }

but, I do not know what to put in here

Fixed Images are not showing in chrome browser in the front page where the background video is. othe pages are OK.

http://agencija.webflow.io

see screenshots below. Any ideas?