html - How to make circle shaped video player on Safari browser? -

i made circle shaped video chrome , firefox css styles:

-webkit-border-radius: 100%; -moz-border-radius: 100%; border-radius: 100%; 

when opened safari, loads circle shapes first when video thumbnail loaded , video controls shown, became square.

i tried making parent div of video circle , overflow:hidden nothing works.

i'm using youtube embed test with. please clarify platform video being hosted or if embedding html5 video element.

it seems have size of video itself. able replicate issue after decreasing size of video past point. when iframe gets small, video scales inside of it's own container separate controls. seems cause of border-radius not taking. here couple of solutions, although more convoluted adding border-radius: 100% iframe.

---

one solution use svg (see fiddle doesn't want show video playing):

svg {      display: block;      width: 560px;      height: 315px;  }

<svg>      <clippath id="circle">        <circle r="120" cx="50%" cy="50%"></circle>      </clippath>          <g clip-path="url(#circle)">        	<foreignobject width="560" x="0"                  y="0" height="315">          <iframe width="560" height="315" src="//www.youtube.com/embed/qnxlau7m600?rel=0&amp;showinfo=0" frameborder="0" allowfullscreen></iframe>      </foreignobject>     </g>	  </svg>

---

another solution to use -webkit-mask-image:

div {     width: 300px;    height: 300px;    border-radius: 100%;    -webkit-mask-image: -webkit-radial-gradient(circle, white 100%, black 100%);  }

<div>     <iframe width="300" height="300" src="https://www.youtube.com/embed/qnxlau7m600" frameborder="0" allowfullscreen></iframe>  </div>

you make work in firefox using mask property, need use svg instead of css gradient mask: url(data:image/svg+xml;base64,...); (this particular method uses data uri). have work in terms of cross-browser compatibility.

---

that's i've got now. i'll report if can think of solution.