Video set as div background, не охватывает полную ширину страницы

Question

Я довольно новичок в веб-разработке, и я пытался установить фон для определенного «div», чтобы быть видео. После обширных исследований мне это удалось, но проблема в том, что видео не покрывает всю длину страницы. Есть ли способ, которым я могу получить видео, чтобы покрыть всю ширину страницы, только для этой конкретной части «div» ....? Спасибо! :)

Вот HTML код, который я использовал для вставки видео в фоновом режиме ...

<header> 

     <div style="position: fixed; top: 0; width: 100%; height: 100%; z-index: -1;background-size: cover; background-image:url(frame.jpg) no-repeat center top"> 
       <video id="video" style="width:100%; height:100%" autoplay loop> 
        <source id="mp4" src="Sea.mp4" type="video/mp4"> 
       </video> 
     </div> 

Answer 1

Вы не подаете правильно значение background-image свойства:

background-image принимает только url("") (в вашем случае), но не также position и size.

ли как:

background: url(frame.jpg) center top/cover; 

jsBin demo

добавить

body{margin:0;} 

удалить запас по умолчанию, применяемый body