, wie man HTML-Video-Player Größe in Bootstrap

Ich habe verwendet Bootstrap ansprechendes Video zu haben, aber Problem ist, ich habe nur 2 Größen, wie man HTML-Video-Player Größe in Bootstrap

class="embed-responsive embed-responsive-16by9"

und

class="embed-responsive embed-responsive-4by3"

diese sind wirklich riesig zu reduzieren. Wie kann ich manuell ändern Breite und Höhe, wenn ich mit diesem versuchen

style="width:400px ; height:400px"

die Videowieder Größe ist aber das ansprechende funktioniert nicht. bitte hilf mir.

dies ist mein Code

<div align="center" class="embed-responsive embed-responsive-16by9" style="width:400px;height:400px"> 

<video class="embed-responsive-item" controls> 
    <source src="<?php echo str_replace("../../../../","",$subvalue->video);?>" type="video/mp4"> 
</video> 
</div>

ich brauche wie diese

enter image description here

aber nachdem ich Stil Breite und Höhe Zugabe erhalten wie dieses

enter image description here

Quelle

2015-01-24 Thamaraiselvam

Die Responsive Embed Klassen stellen nur das Seitenverhältnis ein (verwenden Sie .embed-responsive-16by9 für ein 16x9 Video und .embed-responsive-4by3 für ein 4x3 Video). Sie nehmen 100% der Breite ihres umschließenden Blocks ein.

Um ihnen eine Breite zu geben, müssen Sie nur einen Container hinzufügen, zum Beispiel .sizer, der einen width Satz hat.

.sizer { 
 
    width: 300px; 
 
}

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" /> 
 

 
<div class="sizer"> 
 
    <div class="embed-responsive embed-responsive-16by9"> 
 
    <video src="http://techslides.com/demos/sample-videos/small.mp4" autoplay controls></video> 
 
    </div> 
 
</div>

Eine weitere Option ist es in einem Bootstrap Raster hinzuzufügen, wie diese

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" /> 
 

 
<div class="container"> 
 
    <div class="row"> 
 
    <div class="col-xs-12"> 
 
     <div class="embed-responsive embed-responsive-16by9"> 
 
     <video src="http://techslides.com/demos/sample-videos/small.mp4" autoplay controls></video> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

niemals versuchen, die width und height Eigenschaften direkt auf die hinzufügen Element mit den Klassen s .embed-responsive als das wird seine Reaktionsfähigkeit zu brechen. Es ist nicht erforderlich, .embed-responsive-item hinzuzufügen, es sei denn, Sie möchten einen anderen Artikel als iframe, embed, object oder video.

Quelle

2015-01-24 09:58:04 ckuijjer

aber wenn ich wie Sie gesagt hinzufügen, wird die ansprechende Arbeit nicht – Thamaraiselvam

Sie können es auch umgeben mit ein reguläres Bootstrap-Grid, das z '.col-xs-6' oder umgeben Sie es mit einem Container' div', der eine prozentuale Breite hat. Auf welche Art von Reaktionsbereitschaft suchen Sie genau? – ckuijjer

sehe meine Frage, die ich mit Bildern aktualisiert habe dude – Thamaraiselvam

Go grab fitvids js und so lange wie Sie mit einer Breite beginnen und Höhenabmessungen fitvids wird das Video ansprechbar machen: http://fitvidsjs.com

Quelle

2015-01-25 20:19:12

, wie man HTML-Video-Player Größe in Bootstrap

Antwort

Verwandte Themen