.mov

<div id="video-controls" class="hide">
  <p class="controls-label">Controls</p>
  <p class="select">Select a video:</p>
  <button onclick="player.playlist.next()">Next</button>
  <button onclick="player.playlist.previous()">Previous</button>
  
  <label class="switch">
	<input id="toggle-audio" type="checkbox" onclick="toggleMute();">
	<span class="slider round"></span>
  </label>
  <p class="audio-label">Audio</p>
  
  <label class="switch">
	  <input id="toggle-fs" type="checkbox" onclick="toggleFullScreen();">
	  <span class="slider round"></span>
	</label>
	<p class="fs-label">Fullscreen</p>
  
</div>

<label id="toggle" class="switch fade">
	<input id="toggle-controls" type="checkbox" onclick="toggleControls();">
	<span class="slider round"></span>
</label>

<script src="/blog/wp-content/themes/verdi/video/video.min.js"></script>
<script src="/blog/wp-content/themes/verdi/video/videojs-playlist.min.js"></script>
<script>
	var player = videojs('video');
	
	player.playlist([{
	  sources: [{
		src: '/blog/wp-content/themes/verdi/video/self-portrait-2011.mp4',
		type: 'video/mp4'
	  }],
	  poster: ''
	}, {
	sources: [{
		src: '/blog/wp-content/themes/verdi/video/about-a-year-2023.mp4',
		type: 'video/mp4'
	  }],
	  poster: ''
	}, {
	sources: [{
		src: '/blog/wp-content/themes/verdi/video/15-months-2014.mp4',
		type: 'video/mp4'
	  }],
	  poster: ''
	}, {
	sources: [{
		src: '/blog/wp-content/themes/verdi/video/pre-pandemic-2020.mp4',
		type: 'video/mp4'
	  }],
	  poster: ''
	}, {
	sources: [{
		src: '/blog/wp-content/themes/verdi/video/rebecca-1990.mp4',
		type: 'video/mp4'
	  }],
	  poster: ''
	}, {
	sources: [{
		src: '/blog/wp-content/themes/verdi/video/camera-obscura-2011.mp4',
		type: 'video/mp4'
	  }],
	  poster: ''
	}, {
	sources: [{
		src: '/blog/wp-content/themes/verdi/video/headlights-2011.mp4',
		type: 'video/mp4'
	  }],
	  poster: ''
	}, {
	  sources: [{
		src: '/blog/wp-content/themes/verdi/video/ruthies-2011.mp4',
		type: 'video/mp4'
	  }],
	  poster: ''
	}, {
	sources: [{
		src: '/blog/wp-content/themes/verdi/video/2-weeks-2015.mp4',
		type: 'video/mp4'
	  }],
	  poster: ''
	}, {
	sources: [{
		src: '/blog/wp-content/themes/verdi/video/mona-lisa-2012.mp4',
		type: 'video/mp4'
	  }],
	  poster: ''
	}, {
	sources: [{
		src: '/blog/wp-content/themes/verdi/video/white-rock-lake-2022.mp4',
		type: 'video/mp4'
	  }],
	  poster: ''
	}, {
	  sources: [{
		src: '/blog/wp-content/themes/verdi/video/scrambled-2021.mp4',
		type: 'video/mp4'
	  }],
	  poster: ''
	}]);
	
	// Play through the playlist automatically.
	player.playlist.autoadvance(0);
	
	player.playlist.repeat(true);
</script>
<script>
	function toggleMute() {
	var video=document.getElementById("video_html5_api")
		if(video.muted){
			video.muted = false;
		} else {
			video.muted = true;
		}
	}
	function toggleControls() {
	  var element = document.getElementById("video-controls");
	  element.classList.toggle("hide");
	  var element = document.getElementById("toggle");
	element.classList.toggle("fade");
	}
	function toggleFullScreen() {
	  if (!document.fullscreenElement) {
		document.documentElement.requestFullscreen();
	  } else if (document.exitFullscreen) {
		document.exitFullscreen();
	  }
	}
</script>