videoタグのレスポンシブ対応でハマってしまった
こんにちは、実況動画の投稿をしてみたいけどひたすら腰が重いばりです。
今や様々な端末でWEBサイトがのぞかれる時代ですね
僕もWEBサイトを作っていて、その中で動画のレスポンシブ対応をvideoタグにて行おうとした際にちょっとした謎の使用にぶち当たってハマってしまったので備忘録的に残しておきます。
不具合内容
videoタグ内に横幅(width="**%"といった具合)を指定することでレスポンシブ対応をしようとしたところ、動画の上下に謎の余白が出現してしまった。
確認環境
解決方法
widthのほかに高さ(height)も指定してやる。これだけです。
ちなみにautoだとだめでした。heightの値は％指定をいくつにしても動画の大きさ自体に変化はありませんでした。
ぶっちゃけ経験不足によるミスだとは思いますが、最初に見つけた時にめちゃめちゃドツボにはまったのと、同じことに困る人はおそらくいるだろう！(希望的観測)ということでせっかくなので記事にしてみました。
それでは
