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

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

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

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

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

Q&A

解決済

1回答

1663閲覧

動画をレスポンシブにする方法

tanakashouzoux

総合スコア52

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

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

0グッド

0クリップ

投稿2019/08/16 01:22

編集2019/08/16 05:47

レスポンシブサイトを作っています。

アスペクト比が横:縦=16:9の動画をレスポンシブにしようと以下のコードを利用しているのですが見辛いかもしれませんがiphoneで見ると
イメージ説明
の様に動画の上下に黒い線が入り(下の白い部分は関係ありません)、動画が小さくなってしまいます

出来ればiphoneで見た時に黒い線が入らず、動画が見れるようにしたいと思っております
どうしたら良いのか分からず1週間程途方に暮れております
解決策をご存知の方、何卒ご教示ください宜しくお願い致しますm(__)m

html

1<div class="hero-movie-mask"> 2 <video src="movie.mp4" muted autoplay loop playsinline class="hero-movie"></video> 3</div>

css

1.hero-movie-mask{ 2 position: relative; 3 width: 100%; 4 padding-top: 56.25%; 5} 6 7.hero-movie-mask video{ 8 position: absolute; 9 top: 0; 10 left: 0; 11 width: 100%; 12 height: 100%; 13 opacity:0.6; 14} 15 16 17@media screen and (max-width: 767px) { 18 19.hero-movie-mask{ 20 position: relative; 21 width: 100%; 22 padding-top: 177%; 23 overflow:hidden; 24} 25 26}

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

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

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

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

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

kyoya0819

2019/08/16 02:58 編集

iPhoneに黒い帯が出るのはフルビューにした時にですか? それとも埋め込んだ状態でですか?
tanakashouzoux

2019/08/16 04:29

わざわざご質問ありがとうございますm(_ _)m 大変申し訳ないのですが「フルビュー」とか「埋め込んだ状態」とか専門用語が分からないのですが、サーバーにファイルをアップしてiPhoneからアクセスして見た時です 15インチのノートパソコンから見た時は黒い帯は出ません もう調べまくっても解決策が出なくて涙が出ます
退会済みユーザー

退会済みユーザー

2019/08/16 05:11

「黒帯が出る状態」をスクショして、質問に追記してもらえるとわかるかもです。
tanakashouzoux

2019/08/16 05:40

わざわざご回答ありがとうございますm(_ _)m スクショさせて頂きたいと思います!
tanakashouzoux

2019/08/16 05:48

画像を質問に添付させて頂きました 画像はchromeの要素の検証で見た画面のスクショなんですが、サーバーに上げてみても同じになります
退会済みユーザー

退会済みユーザー

2019/08/16 09:14

こちらソース作ってみましたが再現できず・・・ 提示されている情報以外にここと関わりそうな箇所ありませんか?
tanakashouzoux

2019/08/16 09:32

何度もありがとうございますm(._.)m このコードで上手くいったんですか?! ここと関わりそうなところは他になさそうなのですが・・・(私の力不足で分からないだけかもしれません・・・) 動画をスマホで見た時に画面上から3分の2位までが動画になるようにしたかったのですが・・・
退会済みユーザー

退会済みユーザー

2019/08/16 10:19

書かれたソースコードに、最低限html, head, bodyタグを付け足した状態では、 同じようにChrome上でiPhone6/7/8で見れています。 (ただ、viewportの設定を入れないと@media screen~の中のCSSが反映されず、中央揃えにはなりませんでした) 気になったのは、動画の箇所にopacity:0.6;がかかっているはずが、スクショだと見られない(かかってるにしては色が濃く見える)ので、 CSSが反映されているかどうかが分からないところです。 なので、CSSが反映されてないとか、他にCSSがかかっている要素でdivを囲んだりとかないでしょうか? 差し支えなければ、HTMLとCSSを全文見せていただきたいです。
tanakashouzoux

2019/09/08 10:07

何度もご丁寧に回答頂いたのに返信が遅れてしまい申し訳ありません???? 本日退院するまでパソコンが触れないでおりましたm(__)m ご指摘いただいていた通りdivで囲ってしまっておりました! お陰様で無事に解決することが出来ました! 本当にありがとうございます!!!
guest

回答1

0

ベストアンサー

「padding-top」がPCサイズは「56.25%」なのに、スマホだと「177%」になっているからでは?

投稿2019/08/18 00:55

yoshinavi

総合スコア3521

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

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

tanakashouzoux

2019/09/08 10:08

わざわざご回答ありがとうございます! お陰様で無事解決させて頂きました!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問