Header with video background

Justoverclock

Here if u want a cool header with a video background like this:

Simply modify the path of your video in the code.

<style>
/* Reset */
*{
  margin: 0;
  paddding: 0;
}

.wrapper{
  width: 100%;
  height: 40vh;
  overflow: hidden;
}

.wrapper .wrapper__video{
  object-fit: cover;
  width: 100%;
  height: 100%;
}

</style>
<div class="wrapper">

   <video autoplay loop muted class="wrapper__video">
      <source src="your/video/path/video.mp4">
   </video>
  
</div>

[deleted]

Nice idea, but a major distraction for the actual content

MikeJones

[deleted] Nice idea, but a major distraction for the actual content

Agreed, I just assumed it was a massive advertisement

SKevo

I agree with [deleted]. It is indeed very cool, but distracting.

Darkening the video, or maybe just making it blurry and adding some big heading or title in the center of it would make it better and less distracting in my opinion.

Justoverclock

can u post some example? i will try your suggestion 😃