0

I've implemented a video into my website and this is how I did it: <video autoplay muted loop> (The video has no audio.)

Unfortunately, on mobile, the video does not autoplay and when I hit play the browser opens the video in a sort of "lightbox", or player, where everything else is gone and I just see the video.

I really don't want this to happen. – What is happening and how can I avoid this?

Simon R.
  • 151
  • 10
  • What OS/device/browser? And can you put up a simple snippet with an actual video that is giving the problem. – A Haworth Nov 13 '21 at 16:02
  • What format is your video? By 'mobile', do you mean iPhone or Android? This question is likely related: https://stackoverflow.com/questions/39892713/google-chrome-does-not-autoplay-html5-video-on-mobile – Dan Sorensen Nov 13 '21 at 16:02
  • OMG, I think I just figured it out: I was inspecting the source code of a website I found online and I saw his little thing: `playsinline` and I think that's it. – This perfectly describes my problem: https://css-tricks.com/what-does-playsinline-mean-in-web-video/ – I'm currently uploading the changes on my site to my webspace and if this really worked, I will answer my question. But, Thank You! :) – Simon R. Nov 13 '21 at 16:08
  • The "lightbox"-problem is solved, I'm still trying to make it autoplay though… :) – Simon R. Nov 13 '21 at 16:24

1 Answers1

1

The "lightbox"-problem can easily be fixed, you just have to add this attribute: playsinline to the video tag. – Great documentation here: https://css-tricks.com/what-does-playsinline-mean-in-web-video/

The video did not autoplay on my iPhone because: "Low Power Mode", was active. – Found that out here: Autoplay muted video iOS 11.2 :)

Simon R.
  • 151
  • 10