ランディングページに動画を埋め込んでもずれてしまう

Question

ランディングページに動画を埋め込みました。
しかし縮小や拡大するごとにずれていろんなところに行ってしまします。

どうか助けて頂けますでしょうか？

pisition:relativeで赤い画像の上に載るように配置したいのですが、
下に行ったり、上に行ったりとその画像以外の方向にも行ってしまいます
どうしたらよいですか？

html------------------------------------------------

<div class="video"> <div class="animatedParent animateOnce img"><img src="images/im2.jpg" width="100%;" class="animated fadeInUp" alt=""></div> <video src="images/コンポ 1_6.mp4" controls class="videon"></video> </div>

css------------------------------------------------

.video{pisition:relative;}

.videon{
position:absolute;
bottom:-70%;
left:35%;

}

Comments

[Lhankor_Mhy]

pisition:relative;
↓
position:relative;

Answer 1

とりあえず画像の中心にvideoタグ要素を配置したいなら、下記で上下左右中央に配置されるはずです。

.video{
  position:relative;
}
.videon{
position:absolute;
top:50%;
left:50%;
transform: translate(-50%, -50%);
}