I can not make a round video. In rohrome everything works, but in Edge I don’t know how to do it

How to make the video was around the circle, and not just in the center? I can not stretch the video ....

body { padding: 16px; } video { -o-object-fit: cover; object-fit: cover; width: 34vw; height: 33vw; border-radius: 100% 100% 100% 100%; -webkit-box-shadow: 0px 1px 5px 17px #adddf3; box-shadow: 0px 1px 5px 17px #adddf3; padding-bottom: 0vw; padding-top: 0vw; padding-left: 0vw; padding-right: 0vw; margin-right: 5vw; } 
 <video src="https://i.imgur.com/6ucWers.mp4" autoplay loop />

screenshot

Result in IE:

IE result

  • one
    Put your code in a snippet so that you can reproduce what is not working or not working and then you will be helped. - Nilsan
  • 2
    Edge does not support object-fit for video. Wrap the video in the div, and assign all the styles of the circle already diva - andreymal
  • So far support only pictures - Grundy
  • there seems to be a detour - Grundy
  • Please do not ask questions of the same type. - AK ♦

3 answers 3

 video { border-radius: 50%; } 
 <video autoplay loop> <source src="//www.w3schools.com/html/movie.mp4" type="video/mp4"> <source src="//www.w3schools.com/html/movie.ogg" type="video/ogg"> Your browser does not support the video tag. </video>

  • 2
    something flattened :) - Grundy
  • @Grundy, to be completely round, you need to take a square video, but I don’t have :) - Qwertiy ♦
  • @Qwertiy, in fact, all the salt in a square wrapper - the video can be of any shape and any size. - humster_spb
  • @Grundy, post another answer for square cutter. - Qwertiy ♦

If you want to trim a horizontal video under a circle based on its height, you can do this:

 section { overflow: hidden; border-radius: 50%; width: 85vmin; position: relative; } section::before { content: ""; padding-top: 100%; display: block; } video { position: absolute; left: 50%; top: 0; height: 100%; transform: translateX(-50%); } 
 <section> <video autoplay loop> <source src="//www.w3schools.com/html/movie.mp4" type="video/mp4"> <source src="//www.w3schools.com/html/movie.ogg" type="video/ogg"> Your browser does not support the video tag. </video> </section>

    You .videocontainer the square dimensions to the .videocontainer block (such as there are 400 to 400 ), border-radius: 50% and - necessarily - overflow: hidden .

    And the video sets the height: 100%;