<video>标签的绝对位置

Question

我在视频标签定位方面遇到了一些麻烦。我需要将视频元素放入图像前景（图片中的附件）。我使用了不同的div定位技巧，但在这种情况下没有什么工作正常。如果我更改了具有不同内容的某些css元素的视频代码，则效果很好。我开始怀疑标签视频可能有问题。我没有故意添加<div class="item active"> <img src="../public/images/xxx.png"> <div><video height=410px width:470px controls="controls"> <source src="https:xxxxxx" type="video/mp4" /> </video> </div> </div> ，我向你提出建议。感谢

public function login(Request $request)
  {
    $inputs = $request->only('email', 'password');
//dd($request->input('email'));
$rules = array(
    'email' =>'required',
    'password' => 'required'
);
$validator = Validator::make($inputs, $rules);
if ($validator->fails()){
    $messages = $validator->messages();
    return redirect('login')
              ->withErrors($validator)
              ->withInput($request->except('password'));
} else {
    if (auth()->attempt($inputs)) {
       $is_admin = DB::table('users')
                     ->where('email', $request->input('email'))
                     ->first();
       if ($is_admin->is_admin == 1) {
           return redirect('/company_details');
       } elseif ($is_admin->is_admin == 2) {
           return redirect('dashboard');
         } else {
            dd('something wrong');
           }
     } else {
        return redirect('login')->withErrors(['error' => 'Email or password donot match']);
     } 
  } 
 }

Answer 1

我认为这可以帮到你

＆＃13;

＆＃13;

img {
    width: 100%;
    height: 500px;
    position: absolute;
}
	
video {
    position: absolute;
    left: 50%;
    transform:translateX(-50%);
}

＆＃13;

＆＃13;

＆＃13;

Answer 2

尝试浮动可解决问题的图像。 在图片代码中添加style="width:100%; height:auto;float:left;"

<div class="item active">
   <img src="../public/images/xxx.png" style="width:100%; height:auto;float:left;">
   <div><video height=410px width:470px controls="controls">
          <source src="https:xxxxxx" type="video/mp4" />
        </video>
   </div> 
</div>