CODEWITHSUNDEEP
csshtmltwitter-bootstraptwitter-bootstrap-3
Thamaraiselvam
Thamaraiselvam

Reputation: 7080

how to reduce html video player size in bootstrap

I have used bootstrap to have responsive video , but problem is I have only 2 sizes 

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

and

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

these are really huge. how can i change width and height manually , if i try with this

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

the video is re sized but the responsive does not work. please help me .

this is my 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>

i need like this

enter image description here

but after adding style width and height i get like this

enter image description here

Upvotes: 9

Views: 24775

Answers (2)

Nathaniel Flick
Nathaniel Flick

Reputation: 2963

Go grab fitvids js and as long as you start with width and height dimensions fitvids will make that video responsive: http://fitvidsjs.com

Upvotes: 1

ckuijjer
ckuijjer

Reputation: 13814

The Responsive Embed classes only set the aspect-ratio (use .embed-responsive-16by9 for a 16x9 video and .embed-responsive-4by3 for a 4x3 one). They'll take up 100% of the width of their containing block.

In order to give them a width, you'll only need to add a container, for example .sizer, that has a width set.

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

Another option is to add it inside a Bootstrap grid like this

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

Never try to add the width and height properties directly to the element with the class .embed-responsive as that will break its responsiveness. It is not needed to add .embed-responsive-item unless you want an item different from iframe, embed, object or video.

Upvotes: 16

Related Questions