tomer/index.html

## index.html
sync-multiple-vimeo-videos.html

## sync-multiple-vimeo-videos.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <script src="https://player.vimeo.com/api/player.js"></script>
  <script type="text/javascript">

  function main() {
    const search = window.location.search;
    const params = new URLSearchParams(search);
    const videos = params.has('video')? params.getAll('video') : ['226053498', '226053498'];
    window.videos = videos;
    window.paused = true;
    updatePlayButton();

    const container = document.getElementById('gridContainer');
    for (id of videos) container.appendChild(getVideoElement(id));
  }

  function getVideoElement(id) {
    const iframe = document.createElement('iframe');
    iframe.src = 'https://player.vimeo.com/video/'+ id +'?api=1';
    iframe.width = 320; iframe.height=180; iframe.freameborder=0;
    iframe.allow = 'autoplay; fullscreen'; iframe.allowfullscreen=true;
    iframe.id = id;
    const div = document.createElement('div');
    div.appendChild(iframe);
    return div;
  }

  function updatePlayButton() {
    document.getElementById('playerButton').textContent = window.paused? '⏵ Play': '⏸ Pause';
  }

  function playButton() {
    const players = [];
    const elements = document.getElementById('gridContainer').getElementsByTagName('iframe');
    for (const p of elements) players.push(new Vimeo.Player(p));

    for (const p of players) window.paused? p.play(): p.pause();

    window.paused = !window.paused;
    updatePlayButton();
  }
  </script>
  <style type="text/css">
  #gridContainer {
    display: grid;
    grid: 1fr / auto-flow;
  }
  #gridContainer > div {

  }
  </style>
  <title>syncPlayer</title>
</head>
<body onload='main()'>
  <div id='gridContainer'>
  </div>
  <div>
    <button id="playerButton" onclick="playButton()">Loading…</button>
  </div>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<script src="https://player.vimeo.com/api/player.js"></script>
	<script type="text/javascript">

	function main() {
	const search = window.location.search;
	const params = new URLSearchParams(search);
	const videos = params.has('video')? params.getAll('video') : ['226053498', '226053498'];
	window.videos = videos;
	window.paused = true;
	updatePlayButton();

	const container = document.getElementById('gridContainer');
	for (id of videos) container.appendChild(getVideoElement(id));
	}

	function getVideoElement(id) {
	const iframe = document.createElement('iframe');
	iframe.src = 'https://player.vimeo.com/video/'+ id +'?api=1';
	iframe.width = 320; iframe.height=180; iframe.freameborder=0;
	iframe.allow = 'autoplay; fullscreen'; iframe.allowfullscreen=true;
	iframe.id = id;
	const div = document.createElement('div');
	div.appendChild(iframe);
	return div;
	}

	function updatePlayButton() {
	document.getElementById('playerButton').textContent = window.paused? '⏵ Play': '⏸ Pause';
	}

	function playButton() {
	const players = [];
	const elements = document.getElementById('gridContainer').getElementsByTagName('iframe');
	for (const p of elements) players.push(new Vimeo.Player(p));

	for (const p of players) window.paused? p.play(): p.pause();

	window.paused = !window.paused;
	updatePlayButton();
	}
	</script>
	<style type="text/css">
	#gridContainer {
	display: grid;
	grid: 1fr / auto-flow;
	}
	#gridContainer > div {

	}
	</style>
	<title>syncPlayer</title>
	</head>
	<body onload='main()'>
	<div id='gridContainer'>
	</div>
	<div>
	<button id="playerButton" onclick="playButton()">Loading…</button>
	</div>
	</body>
	</html>