- ベストアンサー
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/845)
足りない短い辺を親要素MAXに表示したいのですよね。 JS使って親要素の画角と子要素のビデオの画角を計測してその上で子要素が親要素いっぱいになるようにサイズ変更すれば出来ます。
お礼
ありがとうございます。 https://jsfiddle.net/6y6x6dqq/1/ JSfilder上では問題なくできているように見えるのですが、 実際はクロームが動画の上下に隙間？空白の部分があり、 headerの背景が上下だけ見えてしまいます。 動画のアスペクト比の問題で上下に隙間が空くからでしょうか？ IEはきっちり収まるのですが。 この場合CSSではむりで、動画自体のアスペクト比を変えるしかないでしょうか？
補足
JSでないと背景のように勝手にCSSが調整してくれることはないのですかね。 うまくいかないので再質問します。
- muuming2001
- ベストアンサー率23% (202/845)
親要素の画角が動画と画角違うならどう頑張っても縦横どちらかが余るでしょう。
関連するQ&A
- 基本的なタグで、ひとつおしえてください。
写真、脚注、写真、脚注 と縦にならべる場合のタグがうまくできてません。 今日見た本では、BR clear=all> でできると書いてありましたが、それがベストなんでしょうか、 ブラウザによって見え方ちがったりしませんか？？
- ベストアンサー
- HTML
- floatした要素を親要素に対して左右ピッタリに収める
タイトルのとおり、CSSのfloatを使ってある要素を横にレイアウトします。 この要素は増減します。マージンを使って要素の右に隙間を作りますが、一番右にくる要素にも同じマージンがつくので、親要素に対して右端に不要な隙間ができます。 ３つ以上の要素をfloatを使って左右一杯に配置するにはどうすればいいのでしょうか。IE6をメインに、safari1.0やfirefoxでも実現できる方法を教えてください。 ソースはこんな感じです。 【HTML】 <div> <p><img src="○○○○" width="150" height="150" /></p> <p><img src="○○○○" width="150" height="150" /></p> <p><img src="○○○○" width="150" height="150" /></p> <p><img src="○○○○" width="150" height="150" /></p> ・ ・ ・ </div> 【CSS】 div{ width:800px;} p{ width:150px; float:left; margin-left:50px;} この場合、４つ目の要素の右にも50pxの空間ができます。 800pxの中に、均等割付けできればと思います。 よろしくお願いいたします。
- 締切済み
- HTML
- 新しく開いたウィンドウへの要素の挿入方法
javaScriptのwindow.openを使ってウィンドウを開き そのウィンドウにhtmlタグを挿入するプログラムを作りたいのですが うまくいきません。 例えば以下のような場合だと id="parent"を持つ親タグの子要素として、appendChildメソッドを使用しimgタグを挿入出来ます var img = document.createElement("img"); var parent = document.getElementById("parent"); parent.appendChild(img); しかしwindow.openで開いたウィンドウは親となるタグがありません。 まっさらなウィンドウに要素を挿入するにはどうすればいいんでしょうか？ なかなかうまくいかず困っております。ぜひお詳しい方ご回答お願いします。
- ベストアンサー
- JavaScript
- IMGタグで画像の繰り返し使用は…
IMGについて質問させてください。 ページの背景として画像を使う場合、画像は縦・横方向に繰り返し使われてページ全面に貼り付けられると思います。 IMGタグで指定する画像を縦方向に繰り返し使うことはできますでしょうか？ テーブルの中で使用する画像なのですが、テーブルの高さが可変なために高さ指定ができないのです。 よろしくお願いします。
- ベストアンサー
- HTML
- 画像タグについて
画像タグについて テキストエディタにHTML（タグ）を入力してホームページの作成を目指して勉強しています。 ボタンの画像を横一列で4つ並べる場合のでタグの入力の仕方なんですが、 使用しているテキストでは改行せずに横に並べてタグを入力していきましょう。 となっています。 正解→<img src="A" ><img src="B" ><img src="C" ><img src="D" > 不正解↓ <img src="A" > <img src="B" > <img src="C" > <img src="D" > 理由としてはブラウザできれいに表示されるからだそうです。 実際にやってみると確かに不正解パターンより正解パターンの方がブラウザで隙間なくきれいに表示されています。 疑問なのですが、同じタグを縦で入力するか横に入力するかで なぜ、ブラウザの表示に違いで出るのでしょうか？ また、<img src="" >タグ以外でも,改行しないで横に入力するタグはあるのでしょうか？ それはどうやって見分けるのでしょうか？ よろしくお願いいたします。
- ベストアンサー
- HTML
- <a>タグで、WMV再生がすぐ始まらない
WMVの動画を再生するホームページを作っています。 以下の<a>タグでWMVの700MBの動画が開くようにしています。 <a href="./movie.wmv">動画</a> IE7.0の場合だと、リンクのクリックでWindows Media Playerが起動し、バッファをとりながら すぐに動画再生が始まります。 Firefox3.6の場合は、リンクをクリックするとFirefoxのブラウザの中で動画を再生しようしているようで、 ブラウザの表示域が黒くなったままで、再生が始まりません。 おそらく、700MBの動画ファイルを全て読み込んでからでないと再生が始まらないような雰囲気です。 Firefoxでもすぐに再生が始まるようにするには、どのようにタグを書けばよいでしょうか？
- ベストアンサー
- HTML
- imgタグのみで画像を中央に重ねる方法
HTML5+CSS3で画像を中央にフィットした状態で重ねる方法を調べています。 一般的にはbackground-size:contain;で背景を適用したDIV要素にimg要素を挿入しますが、この場合だと一部のブラウザでは背景が印刷されないことがあります。 そのため、background-imageを使わずにこれと同じ方法を実現したいのですが、何かいい方法はありますでしょうか。
- 締切済み
- CSS
- webデザインcss <p>タグ内の長文について
初歩的な質問失礼致します。 webデザイン初心者です。現在サイトの制作中なのですが、<p>要素の長文について何点かわからない所が出てきたので質問させていただきます。 (1) <p>要素で記述した文章の折り返し地点は、<br>を使用しない限り<p>要素に指定したwidth幅によってきまるのでしょうか？ (2) その場合、背景画像を<p>に指定したら自動的にその背景画像も同じwidthになるのでしょうか？ 添付画像の上の図のように、<p>要素にcssで背景画像を指定して、その上に上下左右それぞれ余白をとって長文を配置したいのですが、添付画像の下のような状態になってしまいます。 以下がcssです。 p { background: url(図の水色部分) no-repeat 0 0 ; width:691px; padding: 16px 230px 16px 30px; } （リセットcssでmargin.padding.borderはそれぞれ０にしてあります。） <p>を囲む<div>を作ってそれに背景画像を指定して、<p>に折り返したい幅のwidthを、marginで余白を指定する方法がいいのでしょうか？ 出来れば<p>要素へのcss指定だけで完結させたいのですが、方法がわかりません。 どなたか初心者にもわかりやすくご教授いただけないでしょうか？？ どうかよろしくお願い致します！
- ベストアンサー
- CSS
- [IE7]Object要素内から親ウィンドウの独自オブジェクトを参照したい
以下のようなウェブページを作成しています。 iframe要素の代わりにObject要素を利用しようと思い、ウェブページ内にObject要素を設けて、別なウェブページを読み込んでいます。それぞれ「親」、「子」とします。「親」も「子」それぞれ別々なJavaScriptファイルでオブジェクトを持たせています。 いま、「子」から「親」の持つオブジェクトを利用しようと思っています。今回は仮に「obj」とします。objは「親」の中でグローバルにスコープされています。 iframeの時と同じように「window.parent.obj」で「親」の持つオブジェクトにアクセスしてみました。FirefoxやOperaではアクセスが成功し、「親」の持つオブジェクトにアクセスできました。やったね(^-^) しかしInternet Explorer7のデバッグ・コンソールには「"window.parent.obj"はNullまたはオブジェクトではありません」のエラーが出ます。 ループを使ってオブジェクト「window.parent」の内容を出力してみましたが、再帰的に3回繰り返しても「obj」は含んでいませんでした。 Internet Explorer7でも「親」のオブジェクトにアクセスする方法をご存知の方、ご教授願います。不可能な場合は不可能な旨、お伝えください。
- ベストアンサー
- JavaScript
- [CSS]marginとpaddingについて
ブログのCSSを編集しています。 marginとpaddingの違いがいまいち分かっていなかったので、いろいろなCSS講座サイトを見て回ったのですが、少し混乱して来ました…。 自分なりに以下のような結論を出したのですが、何か問題はありますでしょうか。 ■marginとpaddingは要素にボーダー・背景色を使用しない限り、表示に違いはない。 ■marginはIE6などでレイアウトが崩れる場合や、ブラウザによって相殺が起きたり起きなかったりする場合もあるので、余白は全てpaddingで指定する。 ■ページ全体の設定はデフォルトで margin:0px と padding:0px とし、余白のいらない要素には何も記述しない。(CSSをスッキリさせたいので) ■ページ全体のセンタリングは、 margin:0px auto とする。(どのサイズのスクリーンで見ても、真ん中にくるようにしたいので) ネガティブマージンは使用しません。 また、各エリアやテキストに、ボーダーと背景色は使用していません。 表示に違いがないのであれば、出来れば余白は全てpaddingに統一したいのです。(統一した方が気持ち良いので) この解釈で合っているか、教えてもらえると助かります。 よろしくお願いいたします。
- ベストアンサー
- HTML
お礼
ありがとうございます。 確かにjsfiddle.net上ではなったようです。 https://jsfiddle.net/6y6x6dqq/
補足
ありがとうございます。 https://jsfiddle.net/6y6x6dqq/1/ JSfilder上では問題なくできているように見えるのですが、 実際はクロームが動画の上下に隙間？空白の部分があり、 headerの背景が上下だけ見えてしまいます。 動画のアスペクト比の問題で上下に隙間が空くからでしょうか？ IEはきっちり収まるのですが。 この場合CSSではむりで、動画自体のアスペクト比を変えるしかないでしょうか？