unable to adjust iFrame size-CodePudding

I have an iFrame on my website for a vimeo video that I don't want to be full screen. It's taking up the entire size of the page at 1046 x 588.38 px.

I have tried adjusting the height and width in the embed code to no avail. If I change the percentages in CSS it will break or become too small and still not respond to the height or width values.

HTML is as follows:

<section >
    <div >
        <iframe width="640" height="360" src="https://player.vimeo.com/" frameborder="0"
            allow="autoplay; fullscreen; picture-in-picture" allowfullscreen></iframe>
    </div>
</section>

The possible offending css is as follows:

.responsive {
width: 100%;
height: 0;
padding-bottom: 56.25%;
position: relative; }

.responsive iframe {
display: block;
position: absolute;
width: 100%;
height: 100%; }

CodePudding user response：

you don't need to use width and height in .responsive iframe, you can set the width and height inside the iframe element

.responsive {
width: 100%;
height: 0;
padding-bottom: 56.25%;
position: relative; }

.responsive iframe {
display: block;
position: absolute;
/* width: 100%;
height: 100%;  */
}

<section >
        <div >
            <iframe width="640" height="200" src="https://player.vimeo.com/"                       frameborder="0"allow="autoplay"></iframe>
        </div>
    </section>