<div class="poster">
  <iframe id="myIframe" width="560" height="315" poster="http://jamhouse.com.au/media/video/orchlapse.jpg" src="https://www.youtube.com/embed/ScMzIvxBSi4" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>

.poster {
  position: relative;
  display: inline-flex;
}
.poster:after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background: url(https://picsum.photos/id/102/500/300);
  background-size: cover;
  transition: 1s ease;
  opacity: 0.9;
  cursor: pointer;
}
.poster-active:after {
  opacity: 0;
  pointer-events: none;
}

const poster = document.querySelector(".poster");
poster.addEventListener("click", removePoster);

function removePoster() {
  poster.classList.add("poster-active");
  document.querySelector("#myIframe").src += "?autoplay=1";
}