Video Lightbox Question
Hi All!
Here's the link to my PoC site: https://preview.webflow.com/preview/client-first-template-44a251?utm_medium=preview_link&utm_source=designer&utm_content=client-first-template-44a251&preview=6bca7cba2bebf0ef03dfdd69dcee403b&workflow=preview
I'd like the linked video in the modal to autoplay, and not allow the user to fast forward or close the video without watching. (I realize this isn't normally a good user experience for a website, but this is for an onboarding website and the user is required to watch the video in its entirety.)
I've created a workaround for that by not showing the player controls, and having the "X" button which closes the modal not appear for 30 seconds (the length of the video), but if the video doesn't autoplay, and the user doesn't manually click play, they could technically not watch the video and wait for 30 seconds and close the video modal.
Note: I've tried to set it to autoplay by appending ?autoplay=1 to the end of the URL, but I think that only works on embedded videos in a lightbox?
2 Replies
@Ballen autoplay for videos with sound (i.e. not having the attribute
muted) is blocked by modern browsers. It's a protection "feature" to prevent annoying popup videos with sound.
see https://stackoverflow.com/questions/63261122/how-to-autoplay-video-without-sound
In general - it will be pretty difficult to create an experience where a user is required to watch a video for a certain length of time, especially without the aid of some custom javascript.
Something you could do, which I would consider pretty dark UX and don't recommend, is that when the user clicks the video play buton (you'll need javascript for this since webflow IX won't be able to target the vimeo play button) have a fullscreen fixed div with opacity: 0 display over everything for 30 seconds, which will prevent the user from clicking anything else.
Hope that helps you move the project forward!Stack Overflow
How to autoplay video without sound?
I'd like my video to start playing automatically when the page is launched without sound just like on this page: https://getreact.io/mobile-01/.
I've tried any possible jQuery/javascript/CSS optio...
Thanks for the guidance!