HTML5 & CSS header video with border-radius

Question

Hey there!

So I'm working on a client's website, but have come across a bit of a challenge. The homepage will have a large "jumbotron" style header but it's going to be curved on the bottom edge, like this:

Screencap 1

But instead of having a normal image as the background of this header, I'd like a video. This would work fine if the header was square but with the rounded edge I can't seem to get it to work, this is the best I've managed:

Screencap 2

However, obviously I'd like it to stretch the width of the page. In terms of losing half the image - this is fine but I'd like to keep either the top or middle part of the video as the bottom part doesn't have much to offer in terms of content.

Here's what I've got so far:

<div class="jumbotron index-header">
 <div class="video-container">
   <video class="header-video" autoplay loop muted>
     <source src="img/purplevideo.mp4" type="video/mp4">
     Your browser does not support video.
   </video>
 </div>
</div>

    .index-header {
      text-align:center;
      background: transparent;
      background-image: url(../img/header.jpg);
      background-position: 0% 25%;
      background-size: cover;
      background-repeat: no-repeat;
      color: white;
      box-shadow: #421D5D 0px 5px 15px;
      border-bottom-left-radius: 100%;
      border-bottom-right-radius: 100%;
      height: 350px;
      max-height: 350px;
      width: 110%;
      margin-left: -5% !important;
      overflow: hidden;
    }

    .video-container {
      margin-top: -48px;
      max-height: 100%;
      border-bottom-left-radius: 100%;
      border-bottom-right-radius: 100%;
    //  overflow: hidden;
    }

    .header-video {
      width: 100%;
      max-height: 350px;
      border-bottom-left-radius: 100%;
      border-bottom-right-radius: 100%;
    }

Has anybody got any ideas as to how to solve this? I think I've probably gone the wrong way about doing it so far but I can't think of another way!

Thanks for your help!

ryantdecker ryantdecker · Accepted Answer · 2016-05-14T02:18:04

You're missing position:relative on your index-header div, and on the video element, height:auto; http://codepen.io/anon/pen/EKJbpe

Most of your CSS wasn't needed for this specific effect, so I trimmed it down quite a bit just so you can see what's actually needed...obviously add back what you need for other aspects of the design. Also, it may be useful to note that border radius can take 2 values per corner, which allows you a lot more control over the contour of the curve and may help with cutting off less of your video - the code pen demonstrates this. Finally, personal preference perhaps, but I would recommend left:-5%; instead of margin-left:-5%; -- I think you're likely to have fewer possible side effects, and it's a little more semantic IMO...just moving something to the left, not changing how much space it has around it.

.index-header {
  box-shadow: #421D5D 0px 5px 15px;
  border-bottom-left-radius: 50% 75px;
  border-bottom-right-radius: 50% 75px;
  height: 350px;
  width: 110%;
  left: -5% !important;
  overflow: hidden;
  position:relative;
}

.header-video {
  width:100%;
  height:auto;
}

HTML5 & CSS header video with border-radius

1 Answers