jak zmniejszyć rozmiar odtwarzacza wideo html w bootstrap

Question

Użyłem bootstrap mieć czuły film, ale problemem jest to, mam tylko 2 rozmiary

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

i

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

te są naprawdę ogromne. Jak mogę szerokość i wysokość ręcznie zmienić, jeśli próbuję z tym

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

film jest re wielkości ale reaguje nie działa. proszę, pomóż mi.

to jest mój kod

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

muszę się ten

ale po dodaniu szerokość stylu oraz wysokość i dostać się ten

Answer 1

Responsive Embed klas ustawia tylko proporcje obrazu (użyj .embed-responsive-16by9 dla wideo 16x9 i .embed-responsive-4by3 dla 4x3). Zajmują 100% szerokości swojego bloku zawierającego. Aby uzyskać szerokość, należy dodać kontener, na przykład .sizer, który ma zestaw width.

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

Inną opcją jest dodanie go do środka siatki Bootstrap jak ten

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

Nigdy nie próbować dodać width i height właściwości bezpośrednio do element z klasami s .embed-responsive, ponieważ przerwie to reakcję. Nie jest konieczne dodawanie .embed-responsive-item, chyba że chcesz, aby element był inny niż iframe, embed, object lub video.

Answer 2

Go fitvids grab js i tak długo, jak zacząć szerokość i wysokość wymiary fitvids sprawi, że film czuły: http://fitvidsjs.com