CODEWITHSUNDEEP
htmlcsstwitter-bootstrap-3
Phil
Phil

Reputation: 949

Position div whit video over boostrap 3

I'm trying to position a div with a video ads, this video must go over a image and this image is inside Bootstrap 3 container.. The video has to be responsive and resizes like the image does. The problem is I can't adjust for all resolutions, I try to put the video inside bootstrap too and position over the image, but it did not work properly.

Codepen: https://codepen.io/anon/pen/byGYqV

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

<div id="container">
    <video id='video' controls="controls" preload='none' poster="http://media.w3.org/2010/05/sintel/poster.png">
        <source id='mp4' src="http://media.w3.org/2010/05/sintel/trailer.mp4" type='video/mp4'>
        <source id='webm' src="http://media.w3.org/2010/05/sintel/trailer.webm" type='video/webm'>
        <source id='ogv' src="http://media.w3.org/2010/05/sintel/trailer.ogv" type='video/ogg'>
    </video>
</div> <!-- End Normal Container -->

<div class="container-fluid">
    <div class="row main-player">
        <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6">
            <img alt="" src="https://mitofago.com.mx/sites/default/files/styles/660x320/public/0029399560.jpg" class="img-slider img-responsive">
        </div>
    </div>
</div> <!-- End Boostrap Container -->

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

Thanks!!

Upvotes: 0

Views: 61

Answers (2)

sagar1025
sagar1025

Reputation: 696

I had to restructure some of the HTML to make the video and the image responsive. Here's the updated Codpen link. I also had to add a small media query Updated codepen link

The image is positioned absolute over the video

.img-container {
 position: absolute;
  top: 60px;
  left: 60px;
}

Upvotes: 0

Nisharg Shah
Nisharg Shah

Reputation: 19542

Add this CSS in your video tag, you can adjust your values that describe below in width and max-height

video {
    width: 68rem;
    max-height: 50%;
    max-width: 100%;
}

Updated codepen: https://codepen.io/anon/pen/PvoEjm

Upvotes: 1

Related Questions