響應式視頻

Question

我想讓視頻成爲響應式視頻。視頻已經定位在圖像（電視屏幕）的頂部，無論瀏覽器有多大，重要的是它保持在同一個地方。

我怎麼會去製作視頻所以它是

一）固定在它目前的位置響應 B）。

視頻的高度和寬度，所以我猜這很難做到。

任何意見，將不勝感激。

感謝

里斯

<div class="videocontainer"> 
    <h1 class="videosheading"><strong>VIDEOS</strong></h1> 
     <div class="row"> 
      <div class="col-xs-12 video-cell"> 
       <img class="img-responsive" src="img/TVWALLTWO.jpg"/> 
       <video width="550" height="422" controls muted> 
        <source src=http://techslides.com/demos/sample-videos/small.webm type=video/webm> 
        <source src=http://techslides.com/demos/sample-videos/small.ogv type=video/ogg> 
        <source src=http://techslides.com/demos/sample-videos/small.mp4 type=video/mp4> 
        <source src=http://techslides.com/demos/sample-videos/small.3gp type=video/3gp> 
       </video> 
      </div> 
      </div> 
     </div> 

.video-cell { 
    position: relative; 
} 
.video-cell img { 
    width: 100%; 
} 
.video-cell video { 
    position: absolute; 
    top:6%; 
    bottom:10%; 
    left: 0; 
    right: 7%; 
    background-color: black; 
    border: #2F2925 10px solid; 
    border-radius: 10px; 
    margin: auto; 
    max-width: 100%; 
} 

Answer 1

進行視頻響應幾乎是一樣拍圖片響應。 主要有兩種解決方案：

1）在％s中使用width和max-width屬性而不是像素。 視頻將在他的限制範圍內（當然還有窗口範圍內）縮放。 這是一個非常常見的解決方案 - 但是，我不建議您使用它。 這在屏幕上可能看起來不太好，它們的縱橫比不同於視頻。 http://www.w3schools.com/css/css_rwd_videos.asp

2）更好的解決您的問題是使用媒體屬性爲您的來源，調整不同的視頻爲不同的屏幕尺寸（媒體查詢）。

<video> 
<source src="video-widescreens" media="screen and (min-width:800px)"> 
<source src="video-widescreens" media="screen and (min-width:800px)"> 
<source src="video-smallscreens.mp4" media="screen and (max-width:799px)"> 
<source src="video-smallscreens" media="screen and (max-width:799px)"> 
</video>