Skip to content

Instantly share code, notes, and snippets.

@bfred-it bfred-it/bookmarklet.js
Last active Jun 7, 2016

Embed
What would you like to do?
Play videos inline on the iPhone (bookmarklet)

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)}();

  1. Save
  2. 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.

// 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);
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);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.