背景画像に合わせて video 要素を配置する方法について

Question

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

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

![背景画像]WIDTH:600

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

body {
    background-image: url('/path/to/wall.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 で動画位置を制御しようかと思いましたが、リサイズによる位置のずれ方が複雑でうまく対処出来ませんでした。

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

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

Answer 1

僕もこのようなサイトを作ったことがあります。
background-size:cover;を使用すると仰るとおりに、縦横カバーするように背景画像が変化してしまい、難しいです。

僕が実装した際は、背景画像にあるオブジェクトが少なかったので、1つ1つ画像を切り出し、左上とかを起点にすべて%指定で記述しました。

そしてそのipadを背景画像にしたdivをposition:relative;にしてその中身にvideoタグを入れてみてはどうでしょうか？

もしくは、ipad、ipad以外の背景画像にわけて調整するといったかんじかなーと思いました。

クリティカルな解決方法ではなくて申し訳ございません。

Comments

[app2641]

回答ありがとうございます。
なるほど、やはり画像はバラバラにして配置したほうが良いんですね…
一度、アドバイスして頂いた方法で試してみようと思います。
参考になるようなサイトも見つけられず行き詰っていたのでとても助かりました。
ありがとうございました！