I got myself confused about this the other day, went around searching for an answer and came up empty on finding something clear. The answer actually is quite clear and I feel a little silly for not knowing it.
With it in place, like this:
<video src="..." controls playsinline></video>Mobile browsers, will play the video right where it is instead of the default, which is to open it up fullscreen while it plays.
Here’s what it looks like without playsinline:
Here’s what it looks like with playsinline:
(If you’re like me, you tried to play that video from the play button on the video in the video, only to realize it’s not a real play button. 🤯)
(While we’re getting meta, I’m making sure those videos above have playsinline on them right here in this blog post.)
Note that the user still has the ability to go fullscreen with the video even in the playsinline scenario, so I’d say it’s probably a smart default choice. It’s not literally the default — you have to add it, but you know what I mean.
One of the places this shows up regularly is in the attribute soup that is required to make video be a GIF-replacement:
<video autoplay loop muted playsinline src="..."></video>If you have all four of those attributes, the video will actually autoplay (and loop) on mobile browsers, just like a GIF would, only with far better performance. You can skip loop if you don’t want that, but all the other three are required if you want the autoplay attribute to work.
I also learned that the (only?) way to get a thumbnail to show up on mobile (at least for iOS) is to use a poster attribute. Even if you preload, you don’t see anything but blank white unless you have a poster.
Without a poster:
With a poster:
<video
src="movie.mov"
poster="thumbnail.jpg"
controls
></video>mo
If you can’t be troubled to deal with a poster, you might wanna toss a border or something on video elements to sort of visually block off that area. Otherwise, the floating play button is a little awkward.
If you’re like me, you tried to play that video from the play button on the video in the video, only to realize it’s not a real play button.
Yep… haha. Nice small post, the poster attribution for iOS is something I won’t forget now.
Rock on!
If you’re like me, you thought the whole thing was an image, including the video controls at the bottom. I spent a good minute or two comparing the two “images” to see what the difference was :)
If you want to auto-play a muted video inline on an iOS and still wonder why is it not playing, then check that the phone is not in a low battery mode. Hope it will save hours of frustration to other people ;)
SAVED ME
Hero! Was tearing my hair out on this.
I had this issue, searched everywhere and found nothing until your post, it was so easy! Sometimes, simple issues take your time:-/
Anyway, thanks for sharing :-)
You explained it so simply! Thank you for this.
Here is my experience with using playsinline=1 from my iPhone using Google Chrome, Safari & DuckDuckGo:
Here is where it starts. I click on the Play Button. Note: As you can see, the Play Button is not red.
‘https://savvyify.com/img/image/CQFB’
After clicking the Play Button, it acts like it wants to play, but then returns to the Play Button, which is red – see next image.
‘https://savvyify.com/img/image/CUJu’
After the two steps above occur, then I have a red Play Button and the video plays inline.
‘https://savvyify.com/img/image/CWrj’
Is there a way to correct this to where the video will play inline on the first click?
If you give the video tag a background eg.
background: white;you can get the preview to show on Ios mobile. At least this worked for me.
Thanks for share and show! Keep the great work!
Thank you so much! You solve my question!
To show the thumbnail on iOS, a little workaround is to add #t=0.001 add to the src.