chromeでpointer-events noneが効かない不具合

YouTube埋め込みの前面に要素を重ねてpointer-events: none を指定した際、Google Chromeでうまく効かないことがあったので、その原因と対応方法をメモしておきます。

サンプルコード

まずはpointer-events: noneが効かなかった時のサンプルです。

HTML

<div class="movie-box">
	<iframe width="560" height="315" src="https://www.youtube.com/embed/iD0b9-KRoPM" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
	<div class="movie-box__front"></div>
</div>

.movie-box__frontがYouTubeの前面に配置する要素で、pointer-events: noneを設定して動画をクリックできるようにします。

CSS

.movie-box {
	position: relative;
	width: 560px;
	overflow: hidden;
	border-radius: 20px;
}
.movie-box__front {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	border: #ff0000 6px solid;
	border-radius: 20px;
}

動画を角丸で切り取りたかったので、親要素の.movie-boxでborder-radiusとoverflow: hiddenを指定しています。
不具合が出た場合のデモページ
chromeで確認すると、動画がクリックできませんでした。
　

原因と対応方法

原因としては、border-radiusとoverflow: hiddenを指定した要素内で、iframeの前面にpointer-events: noneを指定した要素を配置した場合にうまく効かないようでした。
border-radiusかoverflow: hiddenのどちらかを外すと、pointer-events: noneがきちんと効くようになりました。
border-radiusを外した場合デモページ
overflow: hiddenを外した場合のデモページ

対応方法に関してはデザインなどによっても変わるかと思いますが、枠を上下左右に分割してから配置するようにして真ん中をクリックできるようにする、iframe自体に枠の指定を行うなどがあります。
今回は特に画像を使ったりはしていなかったので、前面に要素を配置しないで対応を行いました。

HTML

<div class="movie-box">
	<iframe width="560" height="315" src="https://www.youtube.com/embed/iD0b9-KRoPM" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
</div>

CSS

.movie-box {
	width: 560px;
	overflow: hidden;
	border: #ff0000 6px solid;
	border-radius: 20px;
}
.movie-box__front {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
}

対応後のデモページ