CODEWITHSUNDEEP
htmlcss
user2936008
user2936008

Reputation: 1347

How to inherit Image width and height to video tag

Image has width 400x400 as per real image property. Now I have sibling video which should have the same width and height of the image. How can I inherit Image width and height property to video tag

HTML:

<div id="holder">
<img src="http://placehold.it/400x400" >
<video controls="">
  <source src="mov_bbb.mp4" type="video/mp4">
  Your browser does not support HTML5 video.
</video>
</div>

CSS:

#holder {
  position: relative;
}

#stuff {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

http://codepen.io/snehav27/pen/mJoyPO

Upvotes: 2

Views: 1887

Answers (1)

Rachel Gallen
Rachel Gallen

Reputation: 28563

turn stuff into a class and then put div class="stuff" around the video

#holder {
  position: absolute;
 height:400px;
 width:auto;
}

.stuff {
  position: absolute;
  height:inherit;
  width:inherit;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.stuff video{position:absolute;
            height:inherit;
            width:inherit;
            vertical-align:top;}

Upvotes: 2

Related Questions