CODEWITHSUNDEEP
csshtmlhtml5-video
T Nguyen
T Nguyen

Reputation: 3415

Can't set border radius on div enclosing video

So I'm, trying to make a rounded corner video by enclosing the <video> tag in a div with rounded corners. Works great in Chrome & FF but not Safari. I'm guessing it's just a limitation of Safari but just thought I'd throw it out there and see if someone knows of a workaround.

.container {
  max-width: 560px;
  overflow: hidden;
  display: block;
  border-radius: 6px;
  -webkit-border-radius: 6px;
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.5);
  -webkit-box-shadow: 0 0 30px rgba(0, 0, 0, 0.5);
  -moz-box-shadow: 0 0 30px rgba(0, 0, 0, 0.5);
}

#video {
  display: block;
}
<div class="container">
  <video width="100%" autoplay muted id="video">
        <source src="http://techslides.com/demos/sample-videos/small.mp4" type="video/mp4">
        Your browser does not support the video tag.
    </video>
</div>

Upvotes: 2

Views: 1411

Answers (1)

Jon Uleis
Jon Uleis

Reputation: 18649

I can reproduce this issue in Safari 11.1. I was able to resolve it by applying the border-radius directly to the video element like so:

.container {
  max-width: 560px;
  overflow: hidden;
  display: block;
  border-radius: 6px;
  -webkit-border-radius: 6px;
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.5);
  -webkit-box-shadow: 0 0 30px rgba(0, 0, 0, 0.5);
  -moz-box-shadow: 0 0 30px rgba(0, 0, 0, 0.5);
}

#video {
  border-radius: inherit;
  display: block;
}
<div class="container">
  <video width="100%" autoplay muted id="video">
        <source src="http://techslides.com/demos/sample-videos/small.mp4" type="video/mp4">
        Your browser does not support the video tag.
    </video>
</div>

Upvotes: 1

Related Questions