[CSS] 원형 안에 iframe 넣기

See the Pen Untitled by limhaneul2244 (@limhaneul2244) on CodePen.

 

mask-image: radial-gradient(#fff, #000);
ios에서 border-radius가 먹지 않으므로 필수로 지정해준다.

기본 56.25%가 iframe 너비이므로 

width 값의 100%로 지정해주면 유튜브에 검정색 부분이 같이 보이기 때문에 그 부분까지 없애주려면

width의 비율 값을 177.78%로 지정해준다.

177.78인 이유는?

560 / 315 * 100%  = 177.7777777777778

1차방정식으로도 정리 가능

560 : 315 = x : 100
315x = 56000
x = 177.7777777777778