How Can I: Set iframe view point in HTML/CSS to auto size for one screen but not the other

Question

How do I set an iframe view point to auto adjust for mobile devices at 100% but not to be bigger than width="600" height="400" when viewing on a laptop or computer monitor and to center it?

Example of Html/CSS I am using but is adjust to 100% of all screens:

.iframe-container{
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; 
  height: 0;
}
.iframe-container iframe{
  position: absolute;
  top:0;
  left: 0;
  width: 100%;
  height: 100%;
} 

<div class="iframe-container">
    <iframe src="https://www.youtube.com/embed/tgbNymZ7vqY" width="600" height="400"></iframe>
</div> 

Answer 1

You need to add media query for this.

/* Desktop */
.iframe-container iframe {
  width: 600px;
  height: 400px;
}

/* Mobile */
@media screen and (max-width: 768px) {
  .iframe-container iframe {
    width: 100%;
    height: auto;
  }
}

Answer 2

Adding on to the previous answer, to align it in the middle:

.iframe-container {
    width:100%;
    text-align:center;
}