HTML
videoタグで黒い線が出る際の対処方法

はじめに

premiereで書き出した動画をmacのsafariやiPhoneで見たところ、以下の画像のように上下になんか黒い線が入る。

前にもなんかあったんだよなぁ・・・と思ったので、原因を突き止めて修正した話

とりあえず色々と試してみた

ふーむ、動画のサイズはCSSでwitdh 50% でしか指定していないので、比率がおかしいとかじゃないが・・・

  • cssでfilter属性を0にする
  • 上下左右に少し余白を持たせる
  • 背景色を付ける
  • 動画のサイズ(シーケンス設定)で上下のサイズを広げたり、狭めたりする

などなど、試してみたけれども直らず。途方にくれかけたが、シーケンス設定を見直しているときに、動画のフレームサイズの縦横比がカスタム値になっていたのでこれかなと。

動画作成時のフレームサイズの縦横比を気をつける

素材をドロップした際に、シーケンス設定を素材に合わせる様にしてしまったので、一般的な縦横比ではなくなっていた。カスタム値でも動画がゆがんだりしないし、Youtubeにアップするでもない、ウェブページで見せたいので良いかなと思っていた。これが間違いみたいで、余白はできるかもしれないが、一般的な16:9などにして、素材をそのサイズにリサイズするのがいいみたいだ。

ということで、縦長の動画だったので、9:16で作成し直して、アップしたら出なくなった。