video要素のスマホでのレイアウト崩さない再生

video要素を使用するのに、スマホで扱うときは、スマホのプレイヤが起動して画面いっぱいに広がるから注意が必要だと今まで教えてた。

ところが次のplaysinline属性を入れれば、レイアウトも崩れずにvideoを表示できると聞いてびっくり。

<video src="~.mp4" playsinline></video>

画像をインラインで再生できるようだ。試したらできた。(スマホで再生のこと)

マルチ・メディアサンプル

へ〜、技術は進化しているんだなぁ。と感動しきり。