だぶだぶノート

<img>など、タグ属性にwidth、heightを指定できる要素には、CSSでもwidth、heightを指定すると、そのCSSの方が優先される。

<style>
img { width: 120px; height: 120px }
</style>
<img src="poster.png" width="300" height="300">

表示例：

width、またはheightの一方をautoにすると、アスペクト比を固定して拡大する。

<style>
img { width: 120px; height: auto }
</style>
<img src="poster.png" width="300" height="300">

表示例：

しかし、<video>では少々事情が違うようだ。

<style>
p { width: 100%; }
p video { width: 800px; height: auto; }
</style>

<p><video width="640" height="480" autobuffer poster="poster.png" controls>
<source src="video.mp4" type="video/mp4">
</video>
</p>

Safariではheight:autoにした場合は、CSSのwidthが優先され、アスペクト比を保ったままheightを拡大する。

しかし、Safari Mobile（iPad、iPad mini）では、heightが150px固定となり、widthのみCSSが適用される。

表示例：

これに対応するには、posterをvideoの表示サイズで作成するか、height: autoではなく、自分でheightを計算して記述しなければならない。

親要素のサイズが確定している場合は<video>要素の指定はwidth: 100%、height: 100%でも良い。
特に全画面表示であれば、親要素、<video>要素ともにwidth: 100%; height: 100%指定ができる。
この場合は、<video>要素の表示サイズと動画の表示サイズが異なり、動画そのものはアスペクト比を固定したまま拡大される。

<style>
html, body, p { width: 100%; height: 100%;}
p video { width: 100% height: 100%; }
</style>

<p>
<video id="video" width="640" height="480" autobuffer poster="poster.png" controls>
<source src="lv1.mp4" type="video/mp4">
</video>
</p>

表示例：