Play videos inline on the iPhone (bookmarklet)

readme.md

Play videos inline on the iPhone (bookmarklet)

1. Visit this page on on iPhone or iPod Touch
2. Add this page to bookmarks
3. Open your bookmarks
4. Edit the bookmark you just saved
5. Change the URL to:

javascript:void%20function(){var%20e=document.createElement(%22script%22);e.onload=function(){[].forEach.call(document.querySelectorAll(%22video%22),makeVideoPlayableInline)},e.src=%22https://rawgit.com/bfred-it/ffd71c642d2fcf4649b230bd71bc9a93/raw/fb39a59c458aeb49d882d81c9d4be2b3ae0b3b93/enabler.js%22,document.head.appendChild(e)}();

6. Save
7. Open it on any page, like http://jplayer.org/latest/demo-01-video/, and then touch the video directly (play buttons might still go fullscreen)

Note: this doesn't work on videos embedded via <iframe>

This bookmarklet is based on bfred-it/iphone-inline-video, a module that can be implemented on any website by web developers.

bookmarklet.js

// to be flattened with http://chriszarate.github.io/bookmarkleter/
var s = document.createElement('script');
s.onload = function () {
  [].forEach.call(document.querySelectorAll('video'), makeVideoPlayableInline);
};
s.src='https://rawgit.com/bfred-it/ffd71c642d2fcf4649b230bd71bc9a93/raw/fb39a59c458aeb49d882d81c9d4be2b3ae0b3b93/enabler.js';
document.head.appendChild(s);

enabler.js

var s = document.createElement('style');
s.innerHTML = '.IIV::-webkit-media-controls-play-button,.IIV::-webkit-media-controls-start-playback-button,.IIV::-webkit-media-controls-fullscreen-button{opacity:0;pointer-events:none;width:5px}';
document.head.appendChild(s);
s = document.createElement('script');
s.onload = function() {
	[].forEach.call(document.querySelectorAll('video'), function(video) {
		console.log('Enabling on', video);
		makeVideoPlayableInline(video);
		video.addEventListener('webkitbeginfullscreen', function message() {
			video.webkitExitFullscreen();
			setTimeout(alert, 1000, 'If you didn’t want to go fullscreen, try touching the video instead, not the play buttons. If it does’t work, the website might not be compatible.');
			video.removeEventListener('webkitbeginfullscreen', message);
		});
		video.onclick = function() {
			video[video.paused ? 'play' : 'pause']();
		};
	});
};
s.src = 'https://rawgit.com/bfred-it/iphone-inline-video/gh-pages/dist/iphone-inline-video.browser.js';
document.head.appendChild(s);