Responsive iFrame video scaled, but won't center - html

Question

TL;DR: I need a scaled iFrame to be centered on larger screen sizes. I know this is a problem due to absolute positioning in the method.
I'm trying to embed an iFrame (YouTube video specifically) to a website. As it's 2017, I want the site to be responsive, and naturally, I want the embedded video to be responsive as well. So I found some code online that does this, it appears to be the common method for responsively sizing iFrames. I understand what's going on here.
Relevant HTML:
<div class="videoWrapper">
<iframe width="530" height="315" src="https://www.youtube.com/embed/4OJWC1tn_t4" frameborder="0" allowfullscreen>
</iframe>
</div>
Relevant CSS:
.videoWrapper {
position: relative;
padding-bottom: 56.25%;
height: 0;
padding-top: 20px;
overflow: hidden;
}
.videoWrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
This is where the above code gets us to.
This works fairly well, but the video takes up 100% of the container space. It should though, it's coded that way. But what if I don't want it to do that? It looks really bad on larger screen sizes to have a video take up the whole window. I couldn't find an answer to making this not happen, so I tried putting my "videoWrapper" within another called "videoSizer" and scaling that down to width: 60% with height: auto when the screen size is greater than 480px.
Relevant HTML:
<div class="videoSizer">
<div class="videoWrapper">
<iframe width="530" height="315" src="https://www.youtube.com/embed/4OJWC1tn_t4" frameborder="0" allowfullscreen>
</iframe>
</div>
</div>
Relevant CSS:
#media only screen and (min-width: 480px) {
.videoSizer {
width: 60%;
height: auto;
}
}
This is where the above code gets us to.
So the size is about where I want it, and it looks nice on the page, but it's stuck in the top left corner of its container. That's how it should be, it's coded to that absolute position in the container. It's doing what I told it to. However, what I don't understand, and herein lies the problem, when I change the position coding in any way that I've thought of so far, the container size stays the same, but the iFrame element disappears.
So I would like to get the video centered on the site without it taking up 100% of the window, but am out of ideas and knowledge of how to have that happen. If anybody had any suggestions, I'd be really appreciative! I hope I've written this in a way that's descriptive enough and has enough resources attached to adequately explain the problem.
Answer (credit to LKG for helping me find it):
Remove #media query mentioned above. Not necessary, and creates problems.
Code as in LKG's answer, seen below.
To properly calculate bottom padding based on this:
- Add margin and element widths together
- Divide element width by margin width (we'll call this p1)
- Divide iFrame element height by width (call this p2)
- Multiply p1 by p2
- Answer is your new padding-bottom value

Answer 1

Just change css to get center
.videoWrapper iframe {
position: absolute;
top: 0;
left: 0;
right:0;
margin:auto;
}
html,
body {
margin: 0;
padding: 0;
}
.videoWrapper {
position: relative;
padding-bottom: 56.25%;
height: 0;
padding-top: 20px;
overflow: hidden;
}
.videoWrapper iframe {
position: absolute;
top: 0;
left: 0;
right: 0;
margin: auto;
}
<div class="videoWrapper">
<iframe width="530" height="315" src="https://www.youtube.com/embed/4OJWC1tn_t4" frameborder="0" allowfullscreen>
</iframe>
</div>

Answer 2

CSS:
.vertical-center {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
}
HTML:
<div class="vertical-center">
<iframe width="560" height="315" src="../assets/video.mp4" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen>
<p>Error loading video</p>
</iframe>
</div>