現在、あるウェブサイトを 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 で動画位置を制御しようかと思いましたが、リサイズによる位置のずれ方が複雑でうまく対処出来ませんでした。

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

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