Resizing и HTML Video

Question

<!-- Header --> 
<header id="top"> 

    <video autoplay loop poster="towkio.png" style="height:675px; width:100%" id="bgvid"> 

<source src="towkio.mp4" type="video/mp4"> 

 <span id="logo"> 
      <img src="img/logo.png"> 
     </span> 

</header> 

Я хотел бы, чтобы высота 675px, и до сих пор он охватывает всю ширину он действует довольно странно.

http://shearelegancechicago.com/todd/

Answer 1

ли вы имеете в виду что-то подобное?

#video-bg { 
 
    position: fixed; 
 
    top: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
} 
 

 
#video-bg > video { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    width: 100%; 
 
    height: 635px; 
 
    z-index: 1; 
 
} 
 

 
@media (min-aspect-ratio: 16/9) { 
 
    #video-bg > video { 
 
     height: 300%; 
 
     top: -100%; 
 
    } 
 
} 
 
@media (max-aspect-ratio: 16/9) { 
 
    #video-bg > video { 
 
     width: 300%; 
 
     left: -100%; 
 
    } 
 
} 
 

 
@supports (object-fit: cover) { 
 
    #video-bg > video { 
 
    top: 0; left: 0; 
 
    width: 100%; 
 
    height: 635px; 
 
    object-fit: cover; 
 
    } 
 
} 
 

 
#logo img { 
 
    position: fixed; 
 
    top: 50px; 
 
    left: 0; 
 
    z-index: 2; 
 
    width: 50px; 
 
    height: 50px; 
 
}

<header id="video-bg"> 
 
    <video autoplay loop poster="towkio.png" id="bgvid"> 
 
    <source src="http://techslides.com/demos/sample-videos/small.mp4" type="video/mp4"> 
 
</header> 
 
<span id="logo"> 
 
    <img src="https://upload.wikimedia.org/wikipedia/commons/3/33/Vanamo_Logo.png"> 
 
</span>

Here живая демонстрация. Source. Я только что изменил высоту видео и добавил логотип с помощью z-index.