YouTube動画を高さ固定で画面いっぱいに表示
.
YouTube動画をサイト上に、高さを固定して画面いっぱいに表示させたいのですが
下に記述したコードでは、動画に黒い隙間を出さずにレスポンシブ表示する事はできますが、そのまま縮小していくだけで高さが固定されたままというわけにはいきません。何か良い方法はございませんでしょうか?
(ちなみに、ページ表示時に画面いっぱいという事であって動画の下にはコンテンツが続くようなページを想定してます)
もしCSSではどうしても難しいとの事であればオススメのjQueryプラグインの紹介も助かります。
イメージとしては以下のような状態です。
http://js.crap.jp/book/chapter5/max-image.html
-----------------------------------------------------------------------------------------------------------------
<div id="youtube">
<iframe src=""></iframe>
</div>
#youtube {
position: relative;
padding-bottom: 56.25%;
overflow: hidden;
}
#youtube iframe {
position: absolute;
top: 0;
left: 0;
min-width: 100%;
min-height: 100%;
}
投稿日時 - 2018-01-10 04:11:29
質問者が選んだベストアンサー
javascript使わないと無理だと思います。
jquery使うなら
$(window).resize(function() {
//現在のウィンドウ幅からiframeの幅、高さ,position left top をどうしたらよいか割り出しcssを適応するロジック
});
となるでしょうけど、具体的にソース提示はいたしません。
とはいってもよくある動作でしょうから、既に配布されているライブラリも探せば沢山在ると思います。
https://designmodo.com/video-background-website/
投稿日時 - 2018-01-10 21:42:47
ありがとうございます。
やはりjavascript使わないと無理ですか。
ライブラリもたくさん探したのですが、5年も更新が止まってたり、汎用性がなかったりと意外といいものがなかったので今回質問させて頂きました。実は、ご紹介していただいたサイトもみてはいたのですがDEMO動画が動いておりませんでしたのでスルーしておりました。ですが、こちらのサイトのものを試してみます。何度もご丁寧にありがとうございました。
投稿日時 - 2018-01-11 03:21:55
このQ&Aは役に立ちましたか?
0人が「このQ&Aが役に立った」と投票しています
回答（2）
イメージとしてあげて頂いているページは、縦横画面いっぱいのサイズのボックスを作りその背景に画像をbackground-size:coverにて表示しているので画像自体は縦サイズ固定では無いと思います。
http://www.htmq.com/css3/background-size.shtml
cover
縦横比は保持して、背景領域を完全に覆う最小サイズになるように背景画像を拡大縮小する
なのでここで固定なのは画像の縦横比です。実際にイメージとしてあげて頂いているページの幅を縮小すれば画像の縦幅も小さくなります。
>>YouTube動画をサイト上に、高さを固定して画面いっぱいに表示させたい
動画の高さを固定にするなら、画角（縦横比）は決まってるので横幅も固定ですよね？？仮に動画の縦幅が720pxであれば横幅は1280pxとなるわけで、すると1280px以上にブラウザを広げたら横に余白が出るわけで・・・
最終的にどうしたいのかがイマイチわかりませぬ。
固定したいのは動画の縦幅ではない？？
横幅はブラウザイッパイ100%、縦は固定サイズのボックスAを作り、その中を覆うようにyoutube動画を表示。その際、動画の中心点がボックスAの中心点に来るように位置を固定する。
としたい？
投稿日時 - 2018-01-10 07:32:11
大変申し訳ございません。説明と事例が正しくありませんでした。
以下のサイトのような挙動です。
ブラウザの幅を狭くするにつれてYouTube動画が縮小していき、途中から左右の中心点は同じままで幅が狭くなってくような動きです。
http://teamsanta.info/sample/all_scroll/
ただし、このサイトもCSSのbackgroundを使用してますので、iframeを使ったYouTube動画には適用が難しいようです。
お手数おかけしますが、ご教授頂けますと助かります。
投稿日時 - 2018-01-10 14:51:51
ご丁寧な回答感謝します。
投稿日時 - 2018-01-11 20:34:41