要素の背景にbackground-size:coverみたいに動画を配置する

もうすぐ５Gの時代になり、WEBサイトで動画を使う機会がもっと増えてくると思います。
そんな時代に備え、CSSだけで画像で言うところのbackground-size:coverみたいに動画を配置する方法をご説明します。
自己流なのでもっと良い方法がありましたらコメントください。

前提として要素の大きさと動画の縦横比は決まっているものとします。
決まっていない場合は、javascriptで要素と動画の高さ・幅を調べて場合分けなどする必要があるでしょう。

画像でbackground-size:coverする場合には、以下の２パターンがあります。
①画像より要素の方が横長なので、画像と要素の横幅を合わせ、画像を縦方向の真ん中に配置する
②画像より要素の方が縦長なので、画像と洋装の高さを合わせ、画像を横方向の真ん中に配置する
画像ではこれをbackground-size:coverだけで勝手に判断してやってくれます。
この２パターンに分けて動画を配置することを考えてみます。

①の場合。
video{
  position: absolute;
  width: 100%;
  height: auto;
  top: 50%;
  left: 0%;
  transform: translate(0%, -50%);
}
position:absoluteにして、width:100%で横幅を親要素と合わせます。
top:50%で親要素の縦の真ん中に移動してから、translateY（対比を分かりやすくするためtranslateで書いています）で上に-50%移動します。
topで50%移動してtranslateYで-50%移動したら、元の位置に戻るんじゃないかと思いますが違います。
top:50%は親要素の50%で、translateYの50%は自身（動画要素）の50%だからです。
これで縦に真ん中に配置され、画像のbackground-size:coverと同じように動画が配置されます。

②の場合は以下です。
video {
  position: absolute;
  width: auto;
  height: 100%;
  top: 0%;
  left: 50%;
  transform: translate(-50%, 0%);
}
height:100%で親要素に合わせ、left:50%で親要素の真ん中に移動し、動画要素の50%分左に移動し、横方向の真ん中に配置します。

ブラウザの横幅で①②が変わる場合は@media (max-width: OOOpx)とかで場合分けすれば良いですが、親要素が動的なコンテンツで大きさが分からない場合は、javascriptで大きさを取得し、①か②かで場合分けして処理する必要があると思います。

参考： https://teratail.com/questions/117896

カテゴリ：CSS 投稿日時：2019年9月8日 10:14

---

コメント

コメントはまだありません。

コメント投稿

ご自由にコメントください！
※一度投稿すると削除できませんのでご注意ください。管理者の独断と偏見で削除する場合があります。コメント機能は予告なく停止する場合があります。

ニックネーム

コメント