Make videos playable inline on the iPhone (prevents automatic fullscreen)

Downloads in past


2.2.26 years ago8 years agoMinified + gzip package size for iphone-inline-video in KB


Make videos playable inline on Safari on iPhone (prevents automatic fullscreen)

!gzipped sizebadge-gzip !Travis build statusbadge-travislink-travis !npm versionbadge-versionlink-npm
badge-gzip: https://badges.herokuapp.com/size/github/bfred-it/iphone-inline-video/master/dist/iphone-inline-video.min.js?gzip=true&label=gzipped%20size badge-travis: https://api.travis-ci.org/bfred-it/iphone-inline-video.svg badge-version: https://img.shields.io/npm/v/iphone-inline-video.svg link-travis: https://travis-ci.org/bfred-it/iphone-inline-video link-npm: https://www.npmjs.com/package/iphone-inline-video
This enables iOS 10's playsinline attribute on iOS 8 and iOS 9 (almost a polyfill). It lets you:
  • Play videos without forcing the fullscreen on the iPhone (demo)
  • Play silent videos without user interaction
  • Autoplay silent videos with the autoplay attribute (demo)
  • Use videos as WebGL/ThreeJS textures (demo)


Main features

  • <2KB, standalone (no frameworks required)
  • No setup: include it, call enableInlineVideo(video), done
  • No custom API for playback, you can just call video.play() on click
  • Supports audio
  • Supports autoplay on silent videos
  • Doesn't need canvas
  • Doesn't create new elements/wrappers
  • It works with existing players like jPlayer
  • Disabled automatically on iOS 10

  • Needs user interaction to play videos with sound (standard iOS limitation)
  • Limited to iPhone with iOS 8 and 9. iPad support needs to be enabled separately. It's disabled on Android.
  • The video framerate depends on requestAnimationFrame, so avoid expensive animations and similar while the video is playing. Try stats.js to visualize your page's framerate
  • Known issues


Pick your favorite:
<script src="dist/iphone-inline-video.min.js"></script>

npm install --save iphone-inline-video

var enableInlineVideo = require('iphone-inline-video');

import enableInlineVideo from 'iphone-inline-video';


You will need:
  • a <video> element with the attribute playsinline (this is needed on iOS 10)
<video src="file.mp4" playsinline></video>
.IIV::-webkit-media-controls-start-playback-button {
    opacity: 0;
    pointer-events: none;
    width: 5px;
  • the activation call
// one video
var video = document.querySelector('video');
// or if you're already using jQuery:
var video = $('video').get(0);
// or if you have multiple videos:
$('video').each(function () {
Done! It will only be enabled on iPhones and iPod Touch devices.
Now you can keep using it just like you would on a desktop. Run video.play(), video.pause(), listen to events with video.addEventListener() or $(video).on(), etc...
BUT you still need user interaction to play the audio, so do something like this:
video.addEventListener('touchstart', function () {

If at some point you want to open the video in fullscreen, use the standard (but still prefixed) webkitEnterFullScreen() API, but it has some caveats.

Usage with audio-less videos

If your video file doesn't have an audio track, then you have to set a muted attribute:
<video muted playsinline src="video.mp4"></video>

Usage with autoplaying videos

The autoplay attribute is also supported, if muted is set:
<video autoplay muted playsinline src="video.mp4"></video>

Muted videos can also be played without user interaction — which means that video.play() doesn't need to be called inside an event listener:
<video muted playsinline src="video.mp4"></video>
setTimeout(function () { video.play(); }, 1000); // example

Usage on iPad

The iPad already supports inline videos so IIV is not enabled there.
The only reason to enabled IIV on iPad:
  • you want muted videos to autoplay, or
  • you want to play videos without user interaction

To enabled IIV on the iPad:
enableInlineVideo(video, {
	iPad: true

Notes about iOS 10

New features in iOS 10:
  • videos play inline:
<video playsinline src="video.mp4"></video>
  • muted videos play inline without user interaction:
<video muted playsinline src="video.mp4"></video>
setTimeout(function () { video.play(); }, 1000); // example
  • muted videos autoplay inline:
<video autoplay muted playsinline src="video.mp4"></video>
Essentially everything that this module does, so iphone-inline-video will be automatically disabled on iOS 10. Make sure you use the playsinline attribute.


MIT © Federico Brigante