Responsive Video

Question

Ich versuche mein Video reaktionsschnell zu machen. Das Video wurde auf einem Bild (einem Fernsehbildschirm) positioniert und es ist wichtig, dass es am selben Ort bleibt, egal wie groß der Browser ist.

Wie würde ich mich über das Video zu machen, damit es

ist

a) reaktions b) in der Position fixiert es in derzeit.

Das Video hat eine Höhe und eine Breite so ich bin zu raten, es ist schwieriger zu machen.

Jeder Rat würde geschätzt werden.

Dank

Reece

<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

ein Video ansprechbar zu machen ist so ziemlich das gleiche wie ein Bild als Reaktion zu machen. Hauptsächlich haben Sie 2 Lösungen:

1) Verwenden von Breite und Max-Breite Eigenschaften in% s anstelle von Pixeln. Das Video wird innerhalb seiner Grenzen (und natürlich innerhalb der Fenstergrenzen) skalieren. Dies ist eine sehr häufige Lösung - aber trotzdem, ich schlage nicht vor, Sie verwenden es. Dies kann auf Bildschirmen mit einem anderen Seitenverhältnis als Ihrem Video nicht gut aussehen.

2) Die bessere Lösung für Ihr Problem ist die Verwendung des Medienattributs für Ihre Quelle, Anpassung verschiedener Videos für verschiedene Bildschirmgrößen (Medienabfragen).

<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>