- ベストアンサー
videoタグの動画を親要素いっぱいしたい
videoタグの動画を親要素いっぱいにして背景動画にしたいのですが、 縦がいっぱいになってくれません。 下記をさんこうにしてやったのですが、ブラウザいっぱいの情報ばかりで、親要素ピッタリという情報がありません。 http://on-ze.com/archives/1313 ちなみに背景画像の場合はcoverとpaddingを使う方法で成功したのですが、動画の場合はそもそも背景ではないのでこれではうまくいかないのでしょうか？
- CSS
- 回答数3
- ありがとう数3
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
こんばんは %を利用する方法はだめですか？ <!DOCTYPE html> <html> <head> <title>videoタグの動画を親要素いっぱいしたい</title> <style type="text/css"> div{ width:728px; height:600px; border:solid; } video{ height:100%; width:100%; } </style> </head> <body> <div> <video src="test1.mp4" controls></video> </div> </body> </html>
その他の回答 (2)
- muuming2001
- ベストアンサー率23% (202/847)
足りない短い辺を親要素MAXに表示したいのですよね。 JS使って親要素の画角と子要素のビデオの画角を計測してその上で子要素が親要素いっぱいになるようにサイズ変更すれば出来ます。
お礼
ありがとうございます。 https://jsfiddle.net/6y6x6dqq/1/ JSfilder上では問題なくできているように見えるのですが、 実際はクロームが動画の上下に隙間？空白の部分があり、 headerの背景が上下だけ見えてしまいます。 動画のアスペクト比の問題で上下に隙間が空くからでしょうか？ IEはきっちり収まるのですが。 この場合CSSではむりで、動画自体のアスペクト比を変えるしかないでしょうか？
補足
JSでないと背景のように勝手にCSSが調整してくれることはないのですかね。 うまくいかないので再質問します。
- muuming2001
- ベストアンサー率23% (202/847)
親要素の画角が動画と画角違うならどう頑張っても縦横どちらかが余るでしょう。
お礼
ありがとうございます。 確かにjsfiddle.net上ではなったようです。 https://jsfiddle.net/6y6x6dqq/
補足
ありがとうございます。 https://jsfiddle.net/6y6x6dqq/1/ JSfilder上では問題なくできているように見えるのですが、 実際はクロームが動画の上下に隙間？空白の部分があり、 headerの背景が上下だけ見えてしまいます。 動画のアスペクト比の問題で上下に隙間が空くからでしょうか？ IEはきっちり収まるのですが。 この場合CSSではむりで、動画自体のアスペクト比を変えるしかないでしょうか？