応答ビデオ

Question

私はビデオを応答性のあるものにしようとしています。ビデオは画像（テレビ画面）の上に配置されており、ブラウザの大きさにかかわらず同じ場所に留まることが重要です。どのように私はそれが現在である位置に固定

a）の応答 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

はかなり絵が応答することと同じです。 主に2つのソリューションがあります。

1）ピクセルではなく％sの幅と最大幅のプロパティを使用する。 ビデオは自分の制限内（もちろんウィンドウ制限内）でスケールされます。 これは非常に一般的な解決策ですが、それでも使用することはお勧めしません。 これは、あなたのビデオとはアスペクト比が異なる画面では見栄えが悪い場合があります。 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>