【CSS】一部のスマホで動画再生中に動画上の画像が見えなくなる問題の解決方法

ウェブページで動画を再生する際、一部のスマホでは、動画の上に配置した画像やボタンが見えなくなることがあります。この問題は、CSSのtransformプロパティを使用して解決できました。

確認環境

• デバイス: iPhone X
• ブラウザ: Chrome、Safari

問題の概要

以下のようなHTMLとCSSを使用している場合、一部のスマホで動画を再生すると、動画の上に配置したロゴや音量ボタンが見えなくなることがあります。

これらのブラウザでは、特にiOSの仕様により、動画要素のレンダリングが他の要素と異なる方法で処理されるため、このような問題が発生するようです。

HTML

<section class="sec-kv">
    <div class="video-wrap">
        <div class="l-cont">
            <p class="kv_logo">
                <img src="path/to/logo.png" alt="ロゴ">
            </p>
        </div>
        <video autoplay muted loop playsinline poster="path/to/poster.jpg">
            <source src="path/to/video.mp4" type="video/mp4">
        </video>
        <div class="musicbtn-wrap">
            <p id="play"><i class="fas fa-volume-up"></i></p>
            <p id="stop" class="active"><i class="fas fa-volume-mute"></i></p>
        </div>
    </div>
</section>

CSS

.sec-kv .video-wrap {
    position: relative;
}

.sec-kv .video-wrap video {
    width: 100%;
}

.sec-kv .video-wrap .l-cont {
    position: absolute;
    z-index: 1;
}

.sec-kv .video-wrap .musicbtn-wrap {
    position: absolute;
    z-index: 2;
}

解決方法

上記のコードでは、動画が他の要素の前に表示されてしまうことがあります。この問題を解決するためには、CSSのtransform: translateZ(0)を使用します。これにより、GPUを使用してレンダリングされるようになり、動画のz-indexの問題が解消されます。

修正後のCSS

.sec-kv .video-wrap {
    width: 100%;
    position: relative;
    overflow: hidden;
}

.sec-kv .video-wrap video {
    width: 100%;
    -webkit-transform: translateZ(0); /* GPUレンダリングを有効に */
    transform: translateZ(0);         /* GPUレンダリングを有効に */
}

この修正により、動画の上に他の要素が正しく表示されるようになります。具体的には、transform: translateZ(0)を追加することで、動画がGPUレンダリングされるようになり、z-indexの問題が解消されます。

まとめ

一部のスマホで動画を再生すると動画の上に配置した画像やボタンが見えなくなる問題は、CSSのtransform: translateZ(0)を使用することで解決できます。この方法で、動画がGPUレンダリングされるようになり、他の要素が正しく表示されるようになります。