video {display: none; visibility: hidden;} label[for="video-toggle"] {display: none; visibility: hidden;} #video {display: none; visibility: hidden;} input type="checkbox" id="video-toggle" style="display: none; visibility: hidden;" the element is hidden and not displayed inside a hidden and not displayed element activated by a hidden and not displayed element called by a hidden and not displayed element...
6 likes
![[N6] avatar](/site_screenshots/22/24/blankbarrel/index.html.50x50.webp)
![[tfpXE] avatar](/site_screenshots/15/25/tfpxe/index.html.50x50.webp)
![xX [ TR/BZ ] Xx avatar](/site_screenshots/41/77/toribytez/index.html.50x50.webp)
can still be accidentally played on mobile without tapping any of the places that would change display and visbility somehow... I give up.
aw man, I hate code that doesn't work no matter what.. I also had 10 seizures trying to read ts..
try setting pointer-events: none on the video while it's disabled
I'm not able to reliably reproduce it so it's going to be hard to find out if it really worked, but good idea for another level of redundancy, I hope it works lol
I decided to adapt the site for mobile and changed the layout. I removed all the redundancy and so far so good. I noticed while using a site to emulate mobile screens that it was playing because that site wasn't blocking autoplay, but the display none is directly on the video and it shouldn't play until displayed. Perhaps it wasn't faulty code but a real mobile browser bug.
if you're using firefox you can also just press ctrl+shift+m to toggle the variable resolution viewport! it's not perfect but it does the job for me in most cases.