HTML i CSS - wyświetlanie elementów na filmiku <video>

pytanie zadane 12 sierpnia 2020 w HTML i CSS przez kingkushlee Gaduła (3,960 p.)

Witam, mam taki kod:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Robienie zdjec</title>
  <style>
  .videoBg{
        position:absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 2;
    }
    
    .index-100 {
      z-index: 100!important;
    }

    @media (min-aspect-ratio: 16/9) {
      .videoBg{
       
        width: 100%;
        height: auto;
      }
    }
    @media (max-aspect-ratio: 16/9) {
      .videoBg {
       
       width:100%; 
        height: 100%;

        padding:0
      }
    }
    body{
      border:solid red;
    }
    video{
      object-fit:fill

    }
  </style>
</head>
<body>
  
	
  <video id="video" style="z-index: 99;" class="videoBg" autoplay></video>
  <button class="index-100">Przycisk</button>
  <img src="" style="z-index: 102;" id="image">
  
  
  <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
	<script>
		//DO WYCIECIA
    
		const constraints = {
  			video: true,
        "video": {
          "facingMode": 
          { "ideal": "environment" }
        }
		};
		
		var android = navigator.userAgent.toLowerCase().indexOf("android") > -1;

		if (android) {
			const video = document.querySelector("#video");
			
			navigator.mediaDevices.getUserMedia(constraints).
  			then((stream) => {video.srcObject = stream});
      
      $(document).ready(function() {
        $(video).click(function() {
          
        });
      });
      
		}

		//DO WYCIECIA
	</script>
	
</body>
</html>

Chciałbym zrobić tak, aby przycisk pokazywał się na filmiku (przycisk do robienia zdjęć). Jak to zrobić? Z góry dzięki za pomoc.

Edit: Sorry, że wszystko w 1 pliku, ale to tylko demo, potem to uporządkuję.