Nacho Portion Monitor


    2.2.2 • Public • Published


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

    gzipped size Travis build status npm version

    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 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>
    • the native play buttons will still trigger the fullscreen, so it's best to hide them when iphone-inline-video is enabled. More info on the .IIV CSS class

      .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.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 doesn't need to be called inside an event listener:

    <video muted playsinline src="video.mp4"></video>
    setTimeout(function () {; }, 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 () {; }, 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


    npm i iphone-inline-video

    DownloadsWeekly Downloads






    Last publish


    • fregante