How to make it so that the video is played inside the div and you can put a background on it. If you remove position: absolute from the video block, the video is cropped using overflow: hidden, but then the background is not set to video (rgba)

http://codepen.io/Aloving/pen/eBeOaw

<div class="circle"> <video src="file.mp4" autoplay="" loop="" muted"></video> </div> .circle{ position: absolute; top:calc(50% - 100px); left: calc(50% - 100px); border-radius: 50%; overflow: hidden; width: 200px; height: 200px; background-color: rgba(94, 121, 209, 0.5); } .circle video{ position: absolute; z-index: -1; width: 400px; }

    1 answer 1

    Well, for example, create another container inside, round off the corners and work with it

    http://codepen.io/pen/NbwWBV

     .circle { position: absolute; top: calc(50% - 100px); left: calc(50% - 100px); border-radius: 50%; overflow: hidden; width: 200px; height: 200px; } .circle video{ width: 400px; } .circle_inner { position: absolute; left: 0; top: 0; background-color: rgba(94, 121, 209, 0.5); height: 100%; width: 100%; border-radius: 50%; }