{"id":13491787,"url":"https://github.com/fregante/iphone-inline-video","last_synced_at":"2025-10-22T20:08:00.132Z","repository":{"id":57276601,"uuid":"47542242","full_name":"fregante/iphone-inline-video","owner":"fregante","description":"📱 Make videos playable inline on the iPhone (prevents automatic fullscreen)","archived":true,"fork":false,"pushed_at":"2021-11-20T00:14:21.000Z","size":1631,"stargazers_count":2053,"open_issues_count":9,"forks_count":301,"subscribers_count":69,"default_branch":"master","last_synced_at":"2024-05-17T19:02:37.160Z","etag":null,"topics":["autoplaying-videos","iphone","playsinline","polyfill"],"latest_commit_sha":null,"homepage":"https://npm.im/iphone-inline-video","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/fregante.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-12-07T09:26:37.000Z","updated_at":"2024-04-21T23:17:32.000Z","dependencies_parsed_at":"2022-08-31T02:51:45.837Z","dependency_job_id":null,"html_url":"https://github.com/fregante/iphone-inline-video","commit_stats":null,"previous_names":["bfred-it/iphone-inline-video"],"tags_count":19,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fregante%2Fiphone-inline-video","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fregante%2Fiphone-inline-video/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fregante%2Fiphone-inline-video/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fregante%2Fiphone-inline-video/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/fregante","download_url":"https://codeload.github.com/fregante/iphone-inline-video/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":234410123,"owners_count":18828146,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["autoplaying-videos","iphone","playsinline","polyfill"],"created_at":"2024-07-31T19:01:00.208Z","updated_at":"2025-09-27T07:31:27.948Z","avatar_url":"https://github.com/fregante.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# No longer needed :tada:\n\niOS now supports this [natively since v10](https://github.com/fregante/iphone-inline-video#notes-about-ios-10). So long, and thanks for all the videos!\n\n# iphone-inline-video\n\n\u003e Make videos playable inline on Safari on iPhone (prevents automatic fullscreen)\n\n[![gzipped size][badge-gzip]](#no-link)\n[![Travis build status][badge-travis]][link-travis]\n[![npm version][badge-version]][link-npm]\n\n  [badge-gzip]: https://badges.herokuapp.com/size/github/fregante/iphone-inline-video/master/dist/iphone-inline-video.min.js?gzip=true\u0026label=gzipped%20size\n  [badge-travis]: https://api.travis-ci.org/fregante/iphone-inline-video.svg\n  [badge-version]: https://img.shields.io/npm/v/iphone-inline-video.svg\n  [link-travis]: https://travis-ci.org/fregante/iphone-inline-video\n  [link-npm]: https://www.npmjs.com/package/iphone-inline-video\n\nThis enables [iOS 10's `playsinline` attribute](#notes-about-ios-10) on iOS 8 and iOS 9 (almost a polyfill). It lets you:\n\n- Play videos without going fullscreen on the iPhone ([demo](http://fregante.github.io/iphone-inline-video/demo/))\n- Play silent videos without user interaction\n- Autoplay silent videos with the `autoplay` attribute ([demo](http://fregante.github.io/iphone-inline-video/demo/autoplay.html))\n- Use videos as WebGL/ThreeJS textures ([demo](http://fregante.github.io/iphone-inline-video/demo/threejs.html))\n\n[![Demo](http://fregante.github.io/iphone-inline-video/demo/demo-preview.gif)](http://fregante.github.io/iphone-inline-video/demo/)\n\n## Main features\n\n- \u003c2KB, standalone (no frameworks required)\n- No setup: include it, call `enableInlineVideo(video)`, [done](#usage)\n- No custom API for playback, you can just call `video.play()` on `click`\n- Supports **audio**\n- Supports [autoplay](#usage-with-autoplaying-videos) on silent videos\n- Doesn't need canvas\n- Doesn't create new elements/wrappers\n- It works with existing players like jPlayer\n- [Disabled automatically on iOS 10+](#notes-about-ios-10)\n\nLimitations:\n\n- Needs user interaction to play videos with sound (standard iOS limitation)\n- Limited to iPhone with iOS 8 and 9. iPad support needs to be [enabled separately.](#usage-on-ipad) It's disabled on Android.\n- The video framerate depends on `requestAnimationFrame`, so avoid expensive animations and similar while the video is playing. Try [stats.js](https://github.com/mrdoob/stats.js/) to visualize your page's framerate\n- [Known issues](https://github.com/fregante/iphone-inline-video/labels/known%20issue)\n\n## Install\n\nPick your favorite:\n\n```html\n\u003cscript src=\"dist/iphone-inline-video.min.js\"\u003e\u003c/script\u003e\n```\n\n```sh\nnpm install --save iphone-inline-video\n```\n\n```js\nvar enableInlineVideo = require('iphone-inline-video');\n```\n\n```js\nimport enableInlineVideo from 'iphone-inline-video';\n```\n\n## Usage\n\nYou will need:\n\n- a `\u003cvideo\u003e` element with the attribute `playsinline` **(required on iOS 10 and iOS 11. [Why?](#notes-about-ios-10))**\n\n\t```html\n\t\u003cvideo src=\"file.mp4\" playsinline\u003e\u003c/video\u003e\n\t```\n\n- 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](https://github.com/fregante/iphone-inline-video/issues/72#issuecomment-247629743)\n\n\t```css\n\t.IIV::-webkit-media-controls-play-button,\n\t.IIV::-webkit-media-controls-start-playback-button {\n\t    opacity: 0;\n\t    pointer-events: none;\n\t    width: 5px;\n\t}\n\t```\n\n- the activation call\n\n\t```js\n\t// one video\n\tvar video = document.querySelector('video');\n\tenableInlineVideo(video);\n\t```\n\n\t```js\n\t// or if you're already using jQuery:\n\tvar video = $('video').get(0);\n\tenableInlineVideo(video);\n\t```\n\n\t```js\n\t// or if you have multiple videos:\n\t$('video').each(function () {\n\t\tenableInlineVideo(this);\n\t});\n\t```\n\nDone! It will only be enabled on iPhones and iPod Touch devices.\n\nNow 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...\n\n**BUT** you still need user interaction to play the audio, so do something like this:\n\n```js\nenableInlineVideo(video);\nvideo.addEventListener('touchstart', function () {\n\tvideo.play();\n});\n```\n\nIf at some point you want to open the video in fullscreen, use the standard (but still prefixed) `webkitEnterFullScreen()` API, but it has some [caveats.](https://github.com/fregante/iphone-inline-video/issues/33)\n\n## Usage with audio-less videos\n\nIf your video file doesn't have an audio track, then **must** set a `muted` attribute:\n\n```html\n\u003cvideo muted playsinline src=\"video.mp4\"\u003e\u003c/video\u003e\n```\n\n## Usage with autoplaying videos\n\nThe `autoplay` attribute is also supported, if `muted` is set:\n\n```html\n\u003cvideo autoplay muted playsinline src=\"video.mp4\"\u003e\u003c/video\u003e\n```\n\nMuted videos can also be played without user interaction — which means that `video.play()` doesn't need to be called inside an event listener:\n\n```html\n\u003cvideo muted playsinline src=\"video.mp4\"\u003e\u003c/video\u003e\n```\n```js\nsetTimeout(function () { video.play(); }, 1000); // example\n```\n\n## Usage on iPad\n\nThe iPad already supports inline videos so IIV is not enabled there.\n\nThe only reason to enabled IIV on iPad:\n\n- you want muted videos to autoplay, or\n- you want to play videos without user interaction\n\nTo enabled IIV on the iPad:\n\n```js\nenableInlineVideo(video, {\n\tiPad: true\n});\n```\n\n## Notes about iOS 10\n\nNew features in iOS 10 and iOS 11:\n\n* videos play inline:\n\n    ```html\n    \u003cvideo playsinline src=\"video.mp4\"\u003e\u003c/video\u003e\n    ```\n\n* muted videos play inline without user interaction:\n\n    ```html\n    \u003cvideo muted playsinline src=\"video.mp4\"\u003e\u003c/video\u003e\n    ```\n    ```js\n    setTimeout(function () { video.play(); }, 1000); // example\n    ```\n\n* muted videos autoplay inline:\n\n    ```html\n    \u003cvideo autoplay muted playsinline src=\"video.mp4\"\u003e\u003c/video\u003e\n    ```\n\nEssentially everything that this module does, so `iphone-inline-video` will be automatically disabled on iOS 10-11. Make sure you use the `playsinline` attribute.\n\n## License\n\nMIT © [Federico Brigante](https://bfred.it)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffregante%2Fiphone-inline-video","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffregante%2Fiphone-inline-video","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffregante%2Fiphone-inline-video/lists"}