디자인상 페이지내 모든 오브젝트에 모서리 둥굴게 처리가 필요했고 유튜브랑 구글지도를 보통 iframe으로 넣다보니 프레임 자체에 모서리 둥굴게 처리하면 이것 또한 문제 없이 되지 않을까 싶었는데 데스크톱에서는 문제가 없었으나 모바일에서는 둥글어지지 않는 문제가 있었다. 다행히 쉽게 구글링 되었는데

.video {
    position: relative;
    padding-top: percentage(9 / 16);
    border-radius: 1rem;
    overflow: hidden;
    mask-image: radial-gradient(#fff, #000);
}

와 같이 mask-image를 사용하는걸로 구현이 가능했다. IE에서는 안되지만 어차피 모바일에 적용하는 목적이라 상관없다.

참고

• https://stackoverflow.com/questions/45425044/rounded-corners-for-an-iframe-not-working-in-safari
• https://shlee1353.github.io/2019/07/15/css-clip-mask/

잡담

나랑 경력이 비슷한 동일직군의 사람은 공감할텐데내 노력이 부족했을 수도 있긴한데 CSS3를 공부하던 시점에 실 업무에서는 CSS3를 사용할 수 없었기 때문에(모바일도 아이폰3, 옴니아 시절이라 모바일에서도 안되는게 많았다) 공부했어도 잊어버리거나 이 경우처럼 아예 생소한 경우도 있는 것 같다. 마치 알고리즘 문제를 신입 개발자가 훨씬 잘 푸는 것처럼 CSS3도 결국 신입UI개발자가 더 잘하는(해야되는) 항목이 아닐지.. 어쨋거나 구브라우저가 많이 없어지고 사실상의 꼼수로 해결하기 위해 삽질하던 시절이 거의 지나간 것 같아 좋은 작업환경이 된 것 같다.