KINKCreative/gist:69d8a409ac12e2af54844a29f646d85d

## gistfile1.txt
<html><head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <meta name="robots" content="noindex, nofollow">
  <meta name="googlebot" content="noindex, nofollow">

  <script type="text/javascript" src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
  <meta name="viewport" content="width=device-width, initial-scale=1">


  <script type="text/javascript" src="https://bfred-it.github.io/iphone-inline-video/dist/iphone-inline-video.browser.js"></script>


  <style type="text/css">
    html {
      background: #000;
    }
    video {
      position: fixed;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      width: 100%;
      height: 100%;
    }
    .videos {
      position: relative;
      height: 100vh;
      margin-top: 100vh;
      margin-left: -10px;
      margin-right: -10px;
    }

    .video-container {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      top: 0;
      clip: rect(0, auto, auto, 0);
      border-top: #F00 5px solid;
    }

    .IIV::-webkit-media-controls-play-button,
    .IIV::-webkit-media-controls-start-playback-button {
        opacity: 0;
        pointer-events: none;
        width: 5px;
    }
    figure {
      width: 100%;
    }
    .play {
      position: absolute;
      top: 20px;
      left: 50%;
      margin-left:  50px;
      z-index:9999;
      width:  100px;
      height: 30px;
      background: #000000;
      border:  0;
      color: #FFFFFF;
      font-size:  ;
    }
    .video2 {
      -webkit-filter: grayscale(1);
      filter: grayscale(1);
    }

    /*  Stats positioning */
    div canvas {
        float: right;
    }
  </style>

  <title>Mobile Test</title>


<script type="text/javascript">//<![CDATA[
  window.onload=function(){
  javascript:(function(){var script=document.createElement('script');script.onload=function(){var stats=new Stats();document.body.appendChild(stats.dom);requestAnimationFrame(function loop(){stats.update();requestAnimationFrame(loop)});};script.src='//rawgit.com/mrdoob/stats.js/master/build/stats.min.js';document.head.appendChild(script);})()

  var playing = false;
  var videos = document.querySelectorAll('video');
  var behavior = document.querySelector('#behavior');

  if (location.search === '?enabled=false') {
    behavior.innerHTML = '(module disabled everywhere via <code>?enabled=false</code>';
  } else if (location.search === '?enabled=true') {
    enableVideos(true);
    behavior.innerHTML = '(module enabled everywhere (whether it’s necessary or not) via <code>?enabled=true</code>)';
  } else {
    enableVideos();
  }

  //      if (fullscreenButton) {
  //        fullscreenButton.addEventListener('click', function () {
  //          video.webkitEnterFullScreen();
  //        });
  //      }
  //    }

  // debug events
  function debugEvents(video) {
    [
      'loadstart',
      'progress',
      'suspend',
      'abort',
      'error',
      'emptied',
      'stalled',
      'loadedmetadata',
      'loadeddata',
      'canplay',
      'canplaythrough',
      'playing', // fake event
      'waiting',
      'seeking',
      'seeked',
      'ended',
      // 'durationchange',
      'timeupdate',
      'play', // fake event
      'pause', // fake event
      // 'ratechange',
      // 'resize',
      // 'volumechange',
      'webkitbeginfullscreen',
      'webkitendfullscreen',
    ].forEach(function (event) {
      video.addEventListener(event, function () {
        console.info('@', event);
      });
    });
  }

  function enableVideos(everywhere) {
    for (var i = 0; i < videos.length; i++) {
      window.makeVideoPlayableInline(videos[i], !videos[i].hasAttribute('muted'), !everywhere);
      // enableButtons(videos[i]);
      // debugEvents(videos[i]);
    }
  }

  videos[1].pause();

  //    function enableButtons(video) {
  var playBtn = document.querySelector('.play');

  if (playBtn) {
    playBtn.addEventListener('click', function () {
      console.log('play pause');
      playing = !playing;
      for (var i = 0; i < videos.length; i++) {
        if(playing) {
          videos[i].play();
        }
        else {
          videos[i].pause();
        }
      }
    });
  }


}//]]>

</script>

<body>
  <button class="play">Play/pause Videos</button>
  <video webkit-playsinline="" class="video1" src="http://www.html5videoplayer.net/videos/toystory.mp4"></video>

  <div class="videos">
      <div class="video-container">
        <video muted class="video2" webkit-playsinline="" src="http://www.html5videoplayer.net/videos/toystory.mp4"></video>
      </div>

    </div>


  <div id="behavior"></div>


</body>
</html>
	<html><head>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8">
	<meta name="robots" content="noindex, nofollow">
	<meta name="googlebot" content="noindex, nofollow">

	<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
	<meta name="viewport" content="width=device-width, initial-scale=1">


	<script type="text/javascript" src="https://bfred-it.github.io/iphone-inline-video/dist/iphone-inline-video.browser.js"></script>



	<style type="text/css">
	html {
	background: #000;
	}
	video {
	position: fixed;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
	}
	.videos {
	position: relative;
	height: 100vh;
	margin-top: 100vh;
	margin-left: -10px;
	margin-right: -10px;
	}

	.video-container {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	top: 0;
	clip: rect(0, auto, auto, 0);
	border-top: #F00 5px solid;
	}

	.IIV::-webkit-media-controls-play-button,
	.IIV::-webkit-media-controls-start-playback-button {
	opacity: 0;
	pointer-events: none;
	width: 5px;
	}
	figure {
	width: 100%;
	}
	.play {
	position: absolute;
	top: 20px;
	left: 50%;
	margin-left: 50px;
	z-index:9999;
	width: 100px;
	height: 30px;
	background: #000000;
	border: 0;
	color: #FFFFFF;
	font-size: ;
	}
	.video2 {
	-webkit-filter: grayscale(1);
	filter: grayscale(1);
	}

	/* Stats positioning */
	div canvas {
	float: right;
	}
	</style>

	<title>Mobile Test</title>







	<script type="text/javascript">//<![CDATA[
	window.onload=function(){
	javascript:(function(){var script=document.createElement('script');script.onload=function(){var stats=new Stats();document.body.appendChild(stats.dom);requestAnimationFrame(function loop(){stats.update();requestAnimationFrame(loop)});};script.src='//rawgit.com/mrdoob/stats.js/master/build/stats.min.js';document.head.appendChild(script);})()

	var playing = false;
	var videos = document.querySelectorAll('video');
	var behavior = document.querySelector('#behavior');

	if (location.search === '?enabled=false') {
	behavior.innerHTML = '(module disabled everywhere via <code>?enabled=false</code>';
	} else if (location.search === '?enabled=true') {
	enableVideos(true);
	behavior.innerHTML = '(module enabled everywhere (whether it’s necessary or not) via <code>?enabled=true</code>)';
	} else {
	enableVideos();
	}

	// if (fullscreenButton) {
	// fullscreenButton.addEventListener('click', function () {
	// video.webkitEnterFullScreen();
	// });
	// }
	// }

	// debug events
	function debugEvents(video) {
	[
	'loadstart',
	'progress',
	'suspend',
	'abort',
	'error',
	'emptied',
	'stalled',
	'loadedmetadata',
	'loadeddata',
	'canplay',
	'canplaythrough',
	'playing', // fake event
	'waiting',
	'seeking',
	'seeked',
	'ended',
	// 'durationchange',
	'timeupdate',
	'play', // fake event
	'pause', // fake event
	// 'ratechange',
	// 'resize',
	// 'volumechange',
	'webkitbeginfullscreen',
	'webkitendfullscreen',
	].forEach(function (event) {
	video.addEventListener(event, function () {
	console.info('@', event);
	});
	});
	}

	function enableVideos(everywhere) {
	for (var i = 0; i < videos.length; i++) {
	window.makeVideoPlayableInline(videos[i], !videos[i].hasAttribute('muted'), !everywhere);
	// enableButtons(videos[i]);
	// debugEvents(videos[i]);
	}
	}

	videos[1].pause();

	// function enableButtons(video) {
	var playBtn = document.querySelector('.play');

	if (playBtn) {
	playBtn.addEventListener('click', function () {
	console.log('play pause');
	playing = !playing;
	for (var i = 0; i < videos.length; i++) {
	if(playing) {
	videos[i].play();
	}
	else {
	videos[i].pause();
	}
	}
	});
	}





	}//]]>

	</script>

	<body>
	<button class="play">Play/pause Videos</button>
	<video webkit-playsinline="" class="video1" src="http://www.html5videoplayer.net/videos/toystory.mp4"></video>

	<div class="videos">
	<div class="video-container">
	<video muted class="video2" webkit-playsinline="" src="http://www.html5videoplayer.net/videos/toystory.mp4"></video>
	</div>

	</div>


	<div id="behavior"></div>


	</body>
	</html>