Embed Vimeo Video in full width - html

Question

I embed a vimeo video on my website like this:
<div class="fys-fp-content-wrapper">
<div id="fys-fp-video">
</div>
</div>
#fys-fp-video {
position: relative;
padding-bottom: 56.25%;
padding-top: 25px;
height: 600px;
}
#fys-fp-video iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 600px;
}
The Vimeo iFrame is loaded into #fys-fp-video.
However the Video in its original is only 640px width. I want to always display the video in a width of 100%, regardless whether something of the video is but of because of the 600px height, but it is important that it is shown full width.
Does somebody has a hint how I can achieve that?
thanks!

Answer 1

If you use bootstrap, it's easy :
<!-- 16:9 aspect ratio -->
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="..."></iframe>
</div>
Source Bootstrap 4: https://getbootstrap.com/docs/4.0/utilities/embed/
Update Bootstrap 5:
https://getbootstrap.com/docs/5.0/helpers/ratio/#example
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="embed-responsive embed-responsive-16by9">
<iframe lass="embed-responsive-item" src="https://player.vimeo.com/video/54596361" frameborder="0" allow="autoplay; fullscreen" allowfullscreen></iframe>
</div>

Answer 2

I think what you are looking for is vw (viewport width). width:100% means 100% width of the parent. width:100vw means 100% of the screen. I suggest you do like this:
#fys-fp-video {
position: relative;
padding-bottom: 56.25%;
padding-top: 25px;
height: 600px;
}
#fys-fp-video iframe {
position: absolute;
top: 0;
left: 0;
width: 100vw;
height: 600px;
}