【CSS】iframeにborder-radius：iOS対応

YouTube動画などを埋め込む際のiframeにborder-radiusを指定したのですが、iPhoneでみると効かない！
もちろんwrapper要素をかましてて、PCでは問題ないのですが・・
解決法を見つけました。

CSS adding border radius to an IFrame

↑こちらの記事の方法で解決しました。
wrapper要素に`transform: translateY(0px);`を指定するだけです。
ソース例は以下の通りです。

HTML

<div class="iframe_wrapper">
  <iframe></iframe>
</div>

CSS

.iframe_wrapper {
  aspect-ratio: 16/9;
  border-radius: 8px;
  overflow: hidden;
  transform: translateY(0px);
  iframe {
    width: 100%;
    height: 100%;
    vertical-align: bottom;//隙間対策
  }
}

今回の件に必要な部分は以下です。

  border-radius: **px;
  overflow: hidden;
  transform: translateY(0px);

以上です！