2

現在、あるウェブサイトを html と css で構築しています。
実現したいのは以下のことです。

  • 一枚絵の画像を画面いっぱいの背景として使用する
  • 画像中央にある iPad のようなデバイスの液晶部分に動画を表示する

背景画像

背景画像については body 要素に background-size: cover として指定してやれば簡単に画面いっぱいの背景にすることが出来ます。

body {
    background-image: url('/path/to/image.png');
    background-repeat: no-repeat;
    background-position: center center;
    background-attachment: fixed;

    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

しかし、その上に video 要素などで動画を配置することがうまく出来ません。
たとえ初期配置がうまくいってもウィンドウをリサイズしてしまうと動画と背景の位置がずれていってしまいます。JavaScript で動画位置を制御しようかと思いましたが、リサイズによる位置のずれ方が複雑でうまく対処出来ませんでした。

背景に動画位置を合わせるにはどのようにするのがいいでしょうか?
そもそも背景を一枚にしてしまうのがおかしいのでしょうか?
もしそうであれば、どのようなアプローチで構築するのが良いのでしょうか?

教えて頂けると幸甚です。
よろしくお願いします。

1

1 件の回答 1

1

一応背景が1枚でもできなくはありません。問題はbackground-size: coverを使った時、背景画像の倍率がウィンドウのアスペクト比によって依存するのが幅か高さかが変わることです。なので、それぞれで場合分けして計算すれば大丈夫です。Javascriptでもできますが、CSSの方が軽そうなのでCSSでやってみました(calcvwvhなど割と新しめの機能を使ってますが、最近のブラウザならどれでも動くと思います。IE8はダメです。)。

html, body {
	margin: 0;
	height: 100%;
}
body {
	background-image: url("https://i.sstatic.net/LYx2E.jpg");
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
}

/* たてなが == ウインドウアスペクト比 < 画像アスペクト比 == 画像倍率はウインドウ高さ依存(なのでvhを使用)*/
#vid {
	background-color: rgba(0,255,0,0.5);/*こっちを使ってると緑*/

	/* 微調整は式の最後の係数でできます。画像に合わせてください。*/
	/* 2000と1333が質問で使われてた画像の幅と高さなので、これらも画像に合わせて変更を。*/

	/* 位置は中心地(50%)からのズレで計算。*/
	position: absolute;
	left: calc(50% - 100vh / 1333 * 2000 * 0.123);
	top: calc(50% - 100vh * 0.185);

	/* 大きさは単純にウインドウ高さから計算 */
	width: calc(100vh / 1333 * 2000 * 0.246);
	height: calc(100vh * 0.37);
}

/* よこなが == ウインドウアスペクト比 > 画像アスペクト比 == 画像倍率はウインドウ幅依存(なのでvwを使用)*/
@media (min-aspect-ratio: 2000/1300) {
	#vid {
		background-color: rgba(255,0,0,0.5);/*こっちを使ってると赤*/

		/* 上の式をvw依存に変えただけ。 係数は上と同じにすれば切り替え時もスムーズになるはず。*/
		position: absolute;
		left: calc(50% - 100vw * 0.123);
		top: calc(50% - 100vw / 2000 * 1333 * 0.185);
		width: calc(100vw * 0.246);
		height: calc(100vw / 2000 * 1333 * 0.37);
	}
}
<div id="vid"></div>

詳しくはコメントを見ていただいた方がわかるかと思いますが、例ではメディアクエリを使って、ウインドウのアスペクト比が背景画像のアスペクト比より大きい場合(画像倍率がウインドウ幅に依存)に別の計算をするようにしています。切り替えが分かる様に、幅依存の時は赤、高さ依存の時は緑で半透明divを表示するようにしてあります。使う時はvideoタグに変えてもらえればそのまま動くと思います。

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。