調整大小和HTML視頻

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

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

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

調整大小和HTML視頻

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

</header>

我想作的高度675px，而且還有它橫跨全寬它的行爲相當怪異。

http://shearelegancechicago.com/todd/

來源

2015-09-13 Velibor Nikolic

你能更正確地解釋你想要什麼嗎？ – AleshaOleg

http://shearelegancechicago.com/todd/example.png視頻的大小應爲675並填充整個容器。「視頻」是這個城市的圖片 –

還有沒有找到頁面 – AleshaOleg

你的意思是這樣嗎？

#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的幫助下添加了徽標。

來源

2015-09-13 23:00:03 AleshaOleg

那麼近。只是要弄清楚如何推動這些部分。 –

@VeliborNikolic你想把視頻推到底？ – AleshaOleg

http://shearelegancechicago.com/todd/移動視頻部分下的工作部分，也許修復包容器的高度 –

調整大小和HTML視頻

回答

相關問題