Hide progress bar in video background - html

I've created a Wordpress website with a video background on top of the homepage: https://beachvolleylovers.be/
When I go to the website with my iPhone, the video doesn't work (which is normal) but I still see the progress bar at the bottom. You sometimes see that progress bar on desktop when resizing your screen.
How can I hide that?

Set the controls attribute to false did the trick.

Related

How to change white page background on reload and behind safari address bar?

Im building my first react page and everything is all fun and exciting, but on mobile (ios in my case) There seems to be an underlying white background that appears on page reload (flashing) and when i drag the page too far. Its also visible behind the address bar.
I have checked various other Websites and usually on dark pages the addressbar is a kind of translucent black.
How do i achieve this?
I have already changed the background color in my body element etc. (hopefully not in the wrong place)

Background image disappears when viewed on iPhone

We are currently copying airbnb.
The top image does not disappear even if I check the responsive view on Mac, but the image disappears when I check it on iPhone.
Tried: I used background-size:cover and tried height:0 and padding-top:60%.
If you know how to fix it, please tell us.

I am wondering why scroll get disturb when i full screen the HTML 5 video

Currently i am using Html 5 video, when i click on full screen button it eventually disturb the scroll position. Automatically, the scroll position point to the top.
I have created a scenario, it's working fine on the Firefox browser however the scroll get disturb when i use the chrome browser.
Note: Please scroll to mid before tapping on maximize button of the video
Please click on the below link for watching the demo.
Demo is here
`enter code here`http://jsfiddle.net/1re7jkLf/

Parallax effect image resized a bit on iPad and iPhone (when scrolling)

I have a parallax effect on my website. Visible here: http://www.prezzio.net at the end of the page. Everything works well but I noticed one thing on iPad and iPhone. When using Safari browser on iPad and iPhone when you scroll down on the page, the height of the header is somewhat smaller and when you scroll up the height of the header is bigger. This is the normal behaviour. This produce an effect on my parallax background (fix) image. I mean the image is resized a bit because of my image is 100% height. I don't know if I'm clear...
I don't know how to avoid this by keeping my background parallax image fix whenever the user scroll up or down.

CSS-only image slider problems on safari

I have a CSS-only image slider on my website. It works perfectly except on Safari tablet/mobile devices. It's very strange though because the slider just doesn't work on these mobile devices when you go to the slider page directly from my homepage. (If you refresh the page, of if you go directly to the slider page without going to the home page first, it works on these devices in Safari). I have no idea how to fix this, if someone could help please let me know!
Here is the link to my website:
http://averyeliasdesign.com
If you scroll down to the "Work" section and click on one of the work samples, it will take you to the page with the slider.
The link to the slider page is:
http://averyeliasdesign.com/work1.html
If you click on this direct link from your phone, the slider will work. It just doesn't work when you go to the slider page from my homepage.
It is working on my iOS 8.4 device (5th generation iPod touch).