Safariでvideoタグを使用した際に上下に余白が出る際にチェックすること

More than 1 year has passed since last update.

動画埋め込みをしたHPを作成した際、Safariブラウザでvideoの上下に余白が出てしまった際の対処に関するメモ。

videoタグのオプションを見たところ、中に"autobuffer"属性が含まれていることが原因でした。


ex.html

<video class="header-home" src="top_movie.mp4" autoplay autobuffer></video>


autobuffer属性は一部ブラウザでは廃止されているとのことです。

https://developer.mozilla.org/ja/docs/Web/HTML/Element/video