CSS - 100% width of Youtube embed video - html

Question

HTML:
<div class="video">
<iframe src="https://www.youtube.com/embed/bRhZUF47p2E?version=3&rel=0&controls=0&showinfo=0&autoplay=1&mute=1&loop=1" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
</div>
CSS:
.video {
width: 100%;
height: 200px;
border: 1px solid red;
overflow: hidden;
position: relative;
}
iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
JSFIDDLE: http://jsfiddle.net/pj2utq4v/
QUESTION: How to force iframe to be 100% of parent div width. Since parent div is only 200px in height, iframe video would be cropped which is also okay with me.

Answer 1

You can do this changing your CSS classes a little bit:
.video {
position: relative;
width: 100%;
height: 0;
padding-bottom: 56.25%;
}
iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
JSFIDDLE: http://jsfiddle.net/pj2utq4v/1

Answer 2

Added one more div with overflow hidden and fixed height and it works.
<div style="height: 200px; overflow: hidden">
<div class="video">
<iframe src="https://www.youtube.com/embed/bRhZUF47p2E?version=3&rel=0&controls=0&showinfo=0&autoplay=1&mute=1&loop=1" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
</div>
</div>
<style>
.video {
width: 100%;
height: 200px;
border: 1px solid red;
overflow: hidden;
position: relative;
}
iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
</style>
http://jsfiddle.net/pj2utq4v/

Answer 3

Is there a reason you want to use iframes? I would try using HTML5 video tag. Here's an example: https://www.w3schools.com/html/html5_video.asp then set your video width to 100% like this:
<video width="100%" controls>
<source src="mov_bbb.mp4" type="video/mp4">
<source src="mov_bbb.ogg" type="video/ogg">
Your browser does not support HTML5 video.
</video>