Snow Monkey Blocks セクションの背景動画でiPhoneの低電力モードで再生ボタンがタップできない問題を回避するCSS

Snow Monkey Blocksのセクション(背景画像/動画)に、動画を配置し自動再生に設定しても、iPhoneの低電力モードだと、自動再生されず、再生ボタンをタップする必要がある。

ただ、ここで問題になるのが、セクションブロックなので、再生ボタンの上に文字が配置してケース。文字が邪魔で、再生ボタンがタップできない。

そんな場合は、上のツィートの通り、pointer-events: none; のCSSを上の文字に適応すると、問題が回避でき再生ボタンがタップできる。

実際にこのCSSを適応しているページはこちら。(私が制作してお納めしたページです)

参考にした記事はこちら。

実際に追加したCSSはこちら。

/* 省電力モード対策 */
.smb-section-with-bgimage>.c-container{
	pointer-events: none;
}

iPhone省電力モードで動画の自動再生が動かないのに対策する手法の資料はこちら。

iPhoneのモバイルバッテリーでおすすめはこちら。(WatchもOKで、しかも充電も速くできる)

この記事を書いた人

大東 信仁

カンパチが好きです。

プロフィールはこちら

10月14日開催 参加者募集中
(画像をタップ→詳細へ)

ミッションナビゲート モニター
(画像をタップ→詳細へ)

広告