【CSS】iframeにborder-radius:iOS対応
YouTube動画などを埋め込む際のiframeにborder-radiusを指定したのですが、iPhoneでみると効かない!
もちろんwrapper要素をかましてて、PCでは問題ないのですが・・
解決法を見つけました。
↑こちらの記事の方法で解決しました。
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);
以上です!
この記事が気に入ったらサポートをしてみませんか?