CODEWITHSUNDEEP
csstwitter-bootstraptwitter-bootstrap-3
choudhury smrutiranjan parida
choudhury smrutiranjan parida

Reputation: 2748

Bootstrap video player

I want a responsive bootstrap video player and demo so that I know it will work responsively. presently I am using http://html5-ninja.com/preview/index/5#.UYjKBbWouuY but it doesn't support ie8 and not able to responsive.

I have used it like:

<div class="col-md-8" style="background: wheat">
    <div class="form-group">
        <div class="videoUiWrapper thumbnail">
            <video width="640" height="360" id="vdHotPress">
                <source src="http://ia700305.us.archive.org/18/items/CopyingIsNotTheft/CINT_Nik_H264_720.ogv" type="video/ogg" />
                <source src="http://ia700305.us.archive.org/18/items/CopyingIsNotTheft/CINT_Nik_H264_720_512kb.mp4" type="video/mp4" />
                Your browser does not support the video tag.
            </video>
        </div>
    </div>
</div>

it's not showing the play n volume buttons image. And also not responsive I mean I have checked with mozilla and attaching the screenshot. So that you can have an idea. Desktop version

Mobile version

Upvotes: 2

Views: 20587

Answers (1)

Tommy42
Tommy42

Reputation: 128

Here you set the width manually but on mobile the width do not exceed 480px for iPhone for example:

So you use bootstrap for responsiveness

<div class="col-md-8" ...>

This will take automatically the good width relative on screen size so you just need to tell to your video to take the full width it needs by:

<video width="100%" ...>

And if you want to add controls buttons on your player you just need to add controls as an attribute:

<video width="100%" id="vdHotPress" controls>

Code be like:

<div class="col-md-8" style="background: wheat">
  <div class="form-group">
    <div class="videoUiWrapper thumbnail">
      <video width="100%" id="vdHotPress" controls>
        <!-- set width to 100% and add controls for play and volume buttons-->

        <source src="http://ia700305.us.archive.org/18/items/CopyingIsNotTheft/CINT_Nik_H264_720.ogv" type="video/ogg" />
        <source src="http://ia700305.us.archive.org/18/items/CopyingIsNotTheft/CINT_Nik_H264_720_512kb.mp4" type="video/mp4" />

        Your browser does not support the video tag.
      </video>
    </div>
  </div>
</div>

You can go here to learn more about HTML5 player options.

Upvotes: 2

Related Questions