重なり順が下の要素をクリックできるようにする

動画の上に装飾の要素を重ねる実装をする機会があったので、装飾の要素の上からでも動画をクリックできるようにする方法を調べました。

サンプルコード

動画の上に要素を重ねて、枠線をつけるようにしてみます。

HTML

<iframe width="560" height="315" src="https://www.youtube.com/embed/rTZGtIoByTg" frameborder="0" allowfullscreen></iframe>
<div class="overlay"></div>

CSS

.overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 530px;
	height: 285px;
	border: #ff0000 15px solid;
}

動画と同じサイズの要素を上層に配置しているので、クリックしても動画が再生されません。
対応前デモページ
　

JavaScriptで対応が必要かと思ったのですが、重ねた要素にpointer-events: none;を指定することで対応できました。

CSS

.overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 530px;
	height: 285px;
	border: #ff0000 15px solid;

	/* この要素のイベント無効化 */
	pointer-events: none;
}

対応後のデモページ
クリックだけでなくオンマウスでも反応しています。
pointer-events: none;でその要素がイベントの対象にならないのは知っていましたが、イベント自体は下の要素へと通過するようです。

注意点としてpointer-eventsはIE11からの対応となっています。
対応ブラウザはこちら
　

【参考サイト】

• pointer-events – CSS | MDN