Hero video responzivní v 2024

by Petr Haluza

HTML

<section class="hero">

  <div class="hero-video">

    <video loop="" autoplay="" muted="" poster="https://www.digitalstorm.com/img/homepage-20200925-C.jpg">
        <source src="https://www.digitalstorm.com/img/homepage-20200925-C.mp4" type="video/mp4">
    </video>

    <div class="container hero-body">
        <h1>Hraj jako vítěz.</h1>
        <h2>S počítači HAL3000 můžeš zažít pocit jako vítězové turnajů v počítačových hrách.</h2>
        <a href="#">
        <figure>
		  		<svg viewBox="0 0 50 50" version="1.1" xmlns="http://www.w3.org/2000/svg" style="fill-rule:evenodd;fill:rgb(200,0,0)">
    				<path d="M25,3C37.142,3 47,12.858 47,25C47,37.142 37.142,47 25,47C12.858,47 3,37.142 3,25C3,12.858 12.858,3 25,3ZM31.45,25L20.245,33.837L20.245,16.163L31.45,25Z"></path>
					</svg>
				</figure>
        </a>
    </div><!-- /hero-body -->

  </div><!-- /hero-video -->
<style>
.hero-video { position: relative; height: 450px; width: 100vw; overflow: hidden; display:flex; align-items: center;  justify-content: center}
.hero-video video { position: absolute; width: auto; height: auto; min-width: 100%; min-height: 100%;}
.hero-body { position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: flex; gap: 18px; align-items: center; justify-content: center; flex-direction: column; line-height: 1.15; text-align: center}
.hero-body h1 { color: white; font-size: 39px; font-weight: 700; text-shadow: 0px 2px 4px rgb(0 0 0 / 75%); padding: 0 25px}
.hero-body h2 { color: white; font-size: 18px; font-weight: 700; letter-spacing: 0.5px; padding: 0 10%}
.hero-body svg {height:4em}
@media (max-width: 767px) {
	.hero-body h1 { font-size:32px; margin-top:15px}
	.hero-video { height: 600px}
	}
@media (max-width: 991px) and (min-width: 768px) {
	.hero-body h1 { font-size:35px}
	.hero-body h2 {	font-size:15px}
	}
@media (max-width: 1199px) and (min-width: 992px) {
	.hero-body h2 { font-size:17px}
	}
</style>
</section><!-- /hero -->