▼
Streaming live at 10am (PST)

Autoplay video on iOS 10 is here!

#1

Hey all,

This is big news for all of us and this article is a great read and funny too.

WebKit’s New policies for video
Starting in iOS 10, WebKit relaxes its inline and autoplay policies to make these presentations possible, but still keeps in mind sites’ bandwidth and users’ batteries.

https://webkit.org/blog/6784/new-video-policies-for-ios/

It would be great to know if Webflow can support this now and how we could implement it. Or do we need to wait for an update.

Rupen.

#2

WHOA. Has anyone tried this yet for their background video elements?

#3

Hi @PixelGeek.

How can we do this?
Apologies if it is obvious.

Rupen.

#4

Try following this article:
https://help.webflow.com/article/how-to-add-a-background-video-to-your-webflow-site

Report back with your findings please :slight_smile:

#5

Hey @PixelGeek,
iOS 10 has been out for a while now, but background videos in Webflow still don't autoplay?
Thanks

Background video/white space at bottom of page/menu issues
#6

What you're looking for is playsinline which can be added to any video element. This works beautifully on inline videos on iOS 10.

The Webflow team might want to add playsinline to their default background video element, considering users would have to manually inject using JS as a workaround until then. :+1:

<video 
  autoplay="autoplay"
  playsinline
  loop="loop"
  style="width:100%"
  "background-image: url(POSTER-URL)">
  <source src="WEBM-URL">
  <source src="MP4URL">
</video>

To demonstrate, open this link from an iOS 10 device to see the video element autoplay:
http://playsinline.webflow.io

Here's the Webflow project:
https://preview.webflow.com/preview/playsinline?preview=d7203661bd3a954f957f464a6b46c623

Note: playsinline will not work if your video has an audio track. If you're unable to remove the audio track from a video, you can add muted to the video element.

 <video 
   autoplay="autoplay"
   playsinline
   muted
   loop="loop"
   etc...
Interactions-Bug on Safari and Internet Explorer
#7

@Simon_Lessing @McGuire I'll inform the team and see what they say. thanks for the heads up

#8

This would be brill!
Could mean no more converting videos to gifs for iOS 10 at least.

#9

Cool!
As I sidenote, I just realized that embedding the html code actually plays
the video directly in the designer view and works great when publishing as
well, so problem solved for me at least!
Also works with 3D transformations etc so quite nice!

#10