yggie/gist:40ad6509c5cf2e85feb8

## gistfile1.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title></title>
  <script src="https://code.jquery.com/jquery-2.1.1.js"></script>
</head>
<body>
  <video width="500" height="281" controls>
    <source src="http://download.wavetlan.com/SVV/Media/HTTP/H264/Talkinghead_Media/H264_test1_Talkinghead_mp4_480x360.mp4" type="video/mp4" />
  </video>
  <img src="http://www.thinkuknow.co.uk/Global/swf/ThinkUKnow%205_7/nice.jpg" data-video="sc395CdrpFw">
  <img src="http://2.bp.blogspot.com/--vOShBApMXo/TmBWxEXiAOI/AAAAAAAAAHs/TN8JCzzlM5k/s1600/niceguy.jpg" data-video="TF4kmztJ4Tg">

  <script>
    // How did I do this magic? see https://developers.google.com/youtube/iframe_api_reference#Getting_Started
    var players = [];

    function pauseAllPlayersExcept(player) {
      for (var i = 0; i < players.length; i++) {
        if (players[i] && players[i] !== player) {
          if (players[i] instanceof YT.Player) {
            players[i].pauseVideo();
          } else {
            players[i].pause();
          }
        }
      }
    }

    $('video').each(function () {
      var element = $(this),
          index = players.length;
      players[index] = element[0]; // get the pure un-jQuery-ified element

      element.bind('play', function (e) {
        pauseAllPlayersExcept(players[index]);
      });
    });

    function onYouTubeIframeAPIReady() {
      $('img').each(function () {
        var element = $(this),
            index = players.length;

        // save a space in the array
        players[index] = null;
        element.attr('id', 'video-' + index);

        element.click(function () {
          players[index] = new YT.Player(element.attr('id'), {
            height: 390,
            width: 640,
            videoId: element.data('video'),
            events: {
              onReady: function (event) {
                // equivalent to autoplay=1
                event.target.playVideo();
              },
              onStateChange: function (event) {
                if (event.data === YT.PlayerState.PLAYING) {
                  pauseAllPlayersExcept(players[index]);
                }
              },
            }
          });
        });
      });
    }
  </script>
  <script src="https://www.youtube.com/iframe_api"></script>
</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title></title>
	<script src="https://code.jquery.com/jquery-2.1.1.js"></script>
	</head>
	<body>
	<video width="500" height="281" controls>
	<source src="http://download.wavetlan.com/SVV/Media/HTTP/H264/Talkinghead_Media/H264_test1_Talkinghead_mp4_480x360.mp4" type="video/mp4" />
	</video>
	<img src="http://www.thinkuknow.co.uk/Global/swf/ThinkUKnow%205_7/nice.jpg" data-video="sc395CdrpFw">
	<img src="http://2.bp.blogspot.com/--vOShBApMXo/TmBWxEXiAOI/AAAAAAAAAHs/TN8JCzzlM5k/s1600/niceguy.jpg" data-video="TF4kmztJ4Tg">

	<script>
	// How did I do this magic? see https://developers.google.com/youtube/iframe_api_reference#Getting_Started
	var players = [];

	function pauseAllPlayersExcept(player) {
	for (var i = 0; i < players.length; i++) {
	if (players[i] && players[i] !== player) {
	if (players[i] instanceof YT.Player) {
	players[i].pauseVideo();
	} else {
	players[i].pause();
	}
	}
	}
	}

	$('video').each(function () {
	var element = $(this),
	index = players.length;
	players[index] = element[0]; // get the pure un-jQuery-ified element

	element.bind('play', function (e) {
	pauseAllPlayersExcept(players[index]);
	});
	});

	function onYouTubeIframeAPIReady() {
	$('img').each(function () {
	var element = $(this),
	index = players.length;

	// save a space in the array
	players[index] = null;
	element.attr('id', 'video-' + index);

	element.click(function () {
	players[index] = new YT.Player(element.attr('id'), {
	height: 390,
	width: 640,
	videoId: element.data('video'),
	events: {
	onReady: function (event) {
	// equivalent to autoplay=1
	event.target.playVideo();
	},
	onStateChange: function (event) {
	if (event.data === YT.PlayerState.PLAYING) {
	pauseAllPlayersExcept(players[index]);
	}
	},
	}
	});
	});
	});
	}
	</script>
	<script src="https://www.youtube.com/iframe_api"></script>
	</body>
	</html>