質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.42%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

3回答

2718閲覧

backgroud-size:cover みたいに動画を設定する

kuroishi

総合スコア53

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

1クリップ

投稿2018/03/17 11:37

お世話になっております。

今回の質問ですがbackgroundタグについてです。
このようなコードを記述しました。

#sample{       background-image: url(a.jpg);       background-size: cover;       background-position:center;       background-repeat: no-repeat;       width: 100vw;       height: 100vh;       text-align: center; }

こうすることで、全体を覆うように拡大・縮小することができます。
そこで、今回は画像ではなく動画でやりたいと思い以下のようなコードを記述しました。

<style type="text/css"> #sample{       background-image: url(video/a.mp4);       background-size: cover;       background-position:center;       background-repeat: no-repeat;       width: 100vw;       height: 100vh;       text-align: center; } </style> <video src="video/a.mp4" autoplay loop muted playsinline style="position:fixed; top: 0%; bottom: 0%; margin: 0; right: 0; left: 0; z-index: 2; opacity: 0.2;" id="video"></video>

しかし、動画は表示されませんでした。imgは画像なのでもちろん動画は読みません。
やりたいこととしては、レスポンシブに動画をフルスクリーンで表示させたいと考えています。
ここで、backgroud-sizeタグと同じようにできるようなやり方について教えていただきたいです。
希望として、jQueryやJavaScripを使用したプラグインは避けたいと考えています。
よろしくお願いします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答3

0

ベストアンサー

動画の縦横比が変わらないのであれば、aspect-ratio の media query が使えます。

@media (aspect-ratio: 16/9), (min-aspect-ratio: 16/9)
ぴったり、あるいは、動画よりも画面が横に長くなるときは

  1. 幅を100%にして width: 100%
  2. video の上端を .video-container の上から50%の位置(中央)にして top: 50%
  3. video の高さの半分だけ上に移動させます transform: translateY(-50%)

@media (max-aspect-ratio: 16/9)
動画よりも画面が縦に長くなるときは

  1. 高さを100%にして height: 100%
  2. video の左端を .video-container の左から50%の位置(中央)にして left: 50%
  3. video の幅の半分だけ左に移動させます transform: translateX(-50%)

html

1<style> 2 .video-container { 3 position: fixed; 4 left: 0; 5 right: 0; 6 top: 0; 7 bottom: 0; 8 } 9 video { 10 position: absolute; 11 } 12 @media (aspect-ratio: 16/9), (min-aspect-ratio: 16/9) { 13 video { 14 width: 100%; 15 top: 50%; 16 transform: translateY(-50%); 17 } 18 } 19 @media (max-aspect-ratio: 16/9) { 20 video { 21 height: 100%; 22 left: 50%; 23 transform: translateX(-50%); 24 } 25 } 26</style> 27<div class="video-container"> 28 <video autoplay loop> 29 <source src="https://s3-ap-northeast-1.amazonaws.com/hoo-assets/708213662.mp4"> 30 </video> 31</div>

こちらで動作の確認ができます。
Chrome (Win, Mac), Firefox (Win, Mac), IE11 (Win), Edge (Win) では、大丈夫でした。
モバイルは自動再生できないので静画になっちゃいますが、cover な感じで出ます。
https://s3-ap-northeast-1.amazonaws.com/hoo-assets/background-size-cover-for-video.html

codepen版です。
https://codepen.io/hoo-chan/pen/eMdVMv

投稿2018/03/17 12:26

編集2018/03/17 14:33
退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kuroishi

2018/03/20 05:29

ありがとうございました。スムーズに解決することができました!
defghi1977

2018/03/20 06:22

ああ, なるほど「backgroud-size:cover ”みたい”に動画を設定」したかったわけですね
kuroishi

2018/03/20 06:30

説明不足で申し訳ありません。これが一番自分に近い答えでした。ご回答いただきありがとうございます!
guest

0

とりあえず、

  • セレクタのID名が間違っている
  • 全角スペースを使っている

を修正して、object-fitを使うのはいかがでしょうか。
object-fit - CSS | MDN

CSS

1#video{ 2 object-fit: cover; 3 width: 100vw; 4 height: 100vh; 5}

対応ブラウザに難アリです。
Can I use... Support tables for HTML5, CSS3, etc

投稿2018/03/17 12:12

Lhankor_Mhy

総合スコア36410

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

希望として、jQueryやJavaScripを使用したプラグインは避けたいと考えています。

残念ながら不可能です. そもそもCSSに動画を背景画像に設定する仕組みそのものが存在しません.が, 幾つかの代替案を提示します.

  • FireFoxに限り-moz-element関数を用いて任意のノードをCSS背景とすることが可能です. これをvideo要素に設定すればよいでしょう.

  • JavaScriptの利用を許すのであれば, Safariでは-webkit-canvas(id)関数とdocument.getCSSCanvasContextメソッドを用いてcanvasグラフィックのように背景画像を描くことが可能です. この仕組みを用いてvideo映像を背景画像に転写します.

  • HTMLの構造に手を入れてよいのであればvideo要素をCSSを使って特定のノードの後ろに配置する方法があります.

投稿2018/03/17 12:02

defghi1977

総合スコア4756

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.42%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問