How to make video fit into div?

Question

I need a bit of help. I know this post has been done before but whatever I tried didn't work for me. So basically I have a div which is 300px by 250 and I want to fit my video into this without rendering the video to 300 by 250. Could you please help me out thanks! :)

body {
  margin: 0;
}

#banner{
	position:fixed;
	margin:0;
	width:300px;
	height:250px;
	border: 1px solid red;
}

#banner video{
    position: fixed;
    width: 300px !important;
    height: auto !important;
    background: url('//demosthenes.info/assets/images/polina.jpg') no-repeat;
    background-size: cover;
    transition: 1s opacity;
    z-index:-1;
}

<div id="banner">
<video autoplay  poster="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/polina.jpg" id="bgvid" loop >
  <!-- WCAG general accessibility recommendation is that media such as background video play through only once. Loop turned on for the purposes of illustration; if removed, the end of the video will fade in the same way created by pressing the "Pause" button  -->

<source src="http://demosthenes.info/assets/videos/polina.mp4" type="video/mp4">
</video>
</div>

Answer 1

A video needs to respect it's proportion, right? I don't think you can't change the width and height like you want... you can change the width and height of the "video" tag, but the video displaying will mantain it's proportion... so the solutions are actually 2:

First: change width and height of the div that contains the video, and make the same proportion of the video:

Second: Make the div overflow: hidden and increase the width of the "video" tag until the height of the video itself reaches the div container (like in this fiddle)

https://jsfiddle.net/mjkvupmt/75/

#banner{
  position:fixed;
  margin:0;
  width:300px;
  height:250px;
  border: 1px solid red;
  overflow: hidden;
}

#banner video{
  position: absolute;
  width: 450px !important;
  height: auto !important;
  background: url('//demosthenes.info/assets/images/polina.jpg') no-repeat;
  background-size: cover;
  transition: 1s opacity;
  z-index:-1;
}  

Once you made that, you can position the video as you want