New Project 17 using video backgrounds

Project 17 is now available and has 4 pages that are a variation on the same design but with very different colour combinations and videos. Video backgrounds are used to add impact and draw attention to the site. Ideal for helath, nutrition, well-being type of applications where the use of a relaxing video is more attractive that a static image. Equally the style can be used for other applications that require impact.

Checkout the demo at Webdeersign Project17 for RapidWeaver + Stacks

Further details at https://www.webdeersign.com/projects/pr17

3 Likes

Looks really nice in Chrome and FF for me, but in Safari 12 (Mojave) I’m not seeing the video effect at all.

Also, the curved sections (PaddyCurve?) have a weird delay. They appear straight for about a second and then snap to the curved shape. Weird. Everything looks great and as I would expect as designed in other browsers.

I thought maybe it was because of the uBlock origin extension in Safari, but I also had that loaded in Chrome and it is fine, plus disabling it didn’t change anything.

1 Like

This is the second report I have had about Safari 12. I suspect this is one of the many current unfixed bugs in Safari 12 that need ironing out or you may have other stuff going on. I have tested this on pretty much every browser OS combination I can get my hands on without seeing a glitch and there is more and more evidence to the remark that Safari is the new Internet Explorer. Auto play of videos whas been working on iOS 10+ and Android with Chrome 53+ and so far has been working on Safari. I cannot get Safari 12 (Sierra) to go wrong.

Safari makes a decision to play or not play a video based on stuff like available quota of memory per open tab, system memory usage, etc… It could be that or it could be an extension that is interfering with this process.

The way that the video works is that if the browser decided not to play it then it will use an image frame from the video and I suspect you are seeing a still image. if not let me know. Worst case would be that the video file which is just an optimised .mp4 file, could not be located, and then there is a further fall back of a solid colour and most visitors would not notice any sense of effect or ability to use the site. So the site always remains usable.

PaddyCurve is not used but what you are seeing is a delay in loading the video (maybe Safari thinks your internet is too slow) before drawing the divider. Once the video is loaded fully, the divider is drawn. There is an option to Lazy load the video but these decisions would all depend on the video used in a real life situation.

Note that because the video is warehoused, that it will be cached for further use.

In Safari 12 (High Sierra) all the videos work fine !

Congratulations.

Thanks. Yes the videos certainly work in Safari, Firefox, Chrome, Android, IOS10+, Win10 Edge, Win10 Chrome, Win10 Firefox, etc… However, there are extremely rare situations where Safari 12 seems to pause not just video but animations due to bugs in Safari 12. There is a lot of internet chatter about this version of Safari. I submitted a bug report to Apple a few days ago so hopefully they will fix this bug and all of the other bugs in Safari 12.

But just to re-emphasise, if a video pauses due to a rare browser issue, it shows a fallback image so the site remains 100% usable and this is a key feature of the video backgrounds.

1 Like