Updated v2 Survey project

Hello. I had built a survey with my father in mind, scared as he is about all things internet-related. It was delisted for content reasons. So it goes. Don’t care about content, just the code. The classes and ids remain unchanged, but I can go back and revise those.

I was unable to make Safari accommodate the video background, so any insights into that would be incredibly appreciated. Any critiques as well would be all things fabulous too.

How Safe are you Really? Survey

disclaimer: I’m no expert, I’m a student myself. I just wanted to provide 1 viewpoint.

I don’t know safari well, unfortunately, but I was looking and noticed that the div on line 5 has no closing, I’m not sure if it matters or not, seems to run fine and all, but just a heads up.

The thoughts I have on safari is that it may be a permissions thing, but I wouldn’t know because I don’t have access to one to try it.
I however did find this which brings up another thing byte-range requests, but it caused me to look at your code and it’s muted, maybe you can try just that snippet (and the necessary supporting code) on a safari browser and see if it works, at that same time you could check the dev tools (I assume they have them) to see if there’s any error messages.
In summary of that paragraph, there are a couple of things to try in that thread.

I like your design overall I think it’s very competent and the looping background video is a nice touch. For what it’s worth that worked perfectly fine in my browser (Brave). Having it auto muted is huge, too. Big bonus points from me, lol. Anywho.
Good stuff keep it up! Hope the best.

1 Like

Thank you so much about he missing div closing. It’s in the original code, but I apparently deleted out when I ported it to codepen. All fixed now!

I have a friend in the industry that was also flummoxed by the Safari thing. He did some tinkering. His take was code pen is loading the video via an iframe and the iframe is loading via a different server. Ein minuten bitte, says Safari, because security! I understand a tenth of what I just typed, but I’ll figure it out.

I would have liked to loop the video more seamlessly, but I was pretty hamstrung by finding a non-copyrighted video in the first place. So it goes.

Also, in the Safari mobile app anyhow, the dropdown has a translucent quality, which is fine unless you have a drop- or box-shadow. I have to figure out how to strip out that browser formatting.

Thank you again for the feedback. I am so very new at this and just want to produce professional-looking content. Still looking to crawl though before I walk.

1 Like

You can check it in Debug mode on Codepen, it will remove the iframe. On the top toolbar, there is a Change view button with the Debug mode view option.

You can also host it on GitHub pages, Netlify, Surge.sh, etc. free hosting.