Responsive DIV with with video inside - html

Question

I have the following html and CSS that I need to make responsive.
It starts with a lightweight YouTube video embedding (less YouTube code to download) found from labnol.org. I then wrapped the youtube-player div with two other divs to horizontally center the video.
I've tried a few solutions I've seen here in SO, but have not been able to make this work. I would like to be able to set the max width in any display, but not have it go off the edge of the screen when viewed on mobile devices.
I would greatly appreciate any help. Thank you.
HTML:
<div id="videoParent" class="videoParent">
<div id="videoDiv" class="videoDiv">
<div class="youtube-player" data-id="gmX8VFlrv38"></div>
</div>
</div>
with the following CSS.
<style>
<style>
.videoDiv {
max-width:560px;
display:inline-block;
width:90%;
}
.videoParent {
text-align:center;
}
.youtube-player {
position: relative;
padding-bottom: 56.23%;
/* Use 75% for 4:3 videos */
height: 0;
/*width:400px; */
overflow: hidden;
max-width: 100%;
background: #000;
margin: 5px;
}
.youtube-player iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 100;
background: transparent;
}
.youtube-player img {
bottom: 0;
display: block;
left: 0;
margin: auto;
max-width: 100%;
width: 100%;
position: absolute;
right: 0;
top: 0;
border: none;
height: auto;
cursor: pointer;
-webkit-transition: .4s all;
-moz-transition: .4s all;
transition: .4s all;
}
.youtube-player img:hover {
-webkit-filter: brightness(75%);
}
.youtube-player .play {
height: 72px;
width: 72px;
left: 50%;
top: 50%;
margin-left: -36px;
margin-top: -36px;
position: absolute;
background: url("//i.imgur.com/TxzC70f.png") no-repeat;
cursor: pointer;
}</style>

Answer 1

I simplified my CSS to the following at it appears to be doing what I need it to.
.videoParent {
text-align:center;
}
.videoDiv {
max-width:560px;
display:inline-block;
width:60%;
}