Edit in JSFiddle

<div class="container">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 480 480">
    <path class="hotspot" d="M330,67.5C261,19.5,222.5,87,222.5,87c-27-12-60.5,6.5-60.5,6.5-90.5,82,49.5,160,49.5,160l-8,10.5,16,9L232,329.5l-7-4.5-11.5,12.5-27-33.5L175,317l24.5,31.5-35-25-8,17,33.5,27L155.5,354l-5,16.5L188,387l20.5,19,0.5,6,6.5,1.5,0.5,13-13.5,5,3,5-31,19,34,17L212,480h44l25-55.5-21.5-.5,1-8-8,.5v-27s10-9.5,8.5-31.5c0,0-9-7-12-21l18.5-94.5s9.5-2.5,13-10l-8-9.5s20.5-9,30.5-19C390,119.5,330,67.5,330,67.5ZM258,240l-16.5,76.5-11.5-45,8-12L225.5,252s21.5-22,27-37l6.5,6.5-9.5,8.5Z"/>
  </svg>
  <video id="vid" src="https://i.giphy.com/media/W2zKfzIAqX7Onu9DhG/giphy.mp4" muted playsinline />
</div>

body {
  display: flex;
  align-items: flex-end;
  height: 100vh;
  margin: 0;
  background: white;
}

.container {
  position: relative;
  width: 100%;
  height: 100%;
  max-width: 480px;
  max-height: 480px;
  margin: 0 auto;
}

svg {
  position: absolute;
  left: 0;
  top: 0;
  fill: transparent;
  z-index: 1;
  width: inherit;
  height: inherit;
}

video {
  width: inherit;
  height: inherit;
}

.hotspot {
  cursor: pointer;
}

.hide {
  display: none;
}