hero_video.html

<div id="hero_video_container">
<video autoplay muted loop id="hero_video">
<source src="/videos/video.mp4" type="video/mp4" />
<source src="/videos/video.webm" type="video/webm" />
</video>
</div>
<style>
#hero_video_container {
	position: relative;
	width: 100%;
	height: 75vh;
	max-height: 75vw;
	overflow: hidden;
	background: transparent url('/images/placeholder.png') no-repeat center center;
	background-size: cover;
}
video#hero_video {
  display: none;
  position: relative;
  width: 100%;
  height: 100vw;
  object-fit: cover;
}
@media only screen and (min-width: 1024px) {
	video#hero_video {
		display: block;
		height: auto;
	}
}
</style>