Iframe to center within a container and stop resizing

Question

So, I have an iFrame within a div and I’m trying to set the div to be a certain width and frame when the screen hits a certain pixel as it looks weird after resizing.
currently I have it so it is centred within the container until it resizes to 1071px then it breaks the centre and just goes to the top left then when it gets to 749px it stays at the size I set it but it's still not centred https://jsfiddle.net/8snnwfgy/

<section id="showcase">
 <div class="container">
<div id="video">
  <iframe src="https://www.youtube.com/embed/_lE1GYParQA" frameborder="2px 
  white solid" allowfullscreen>
    <p>Your Web browser doesn't support Iframes</p>
  </iframe>
</div>

#showcase {
  padding: 10px;
  margin-top: 5px;
  min-height: 450px;
  text-align: center;
  background: url('https://png.pngtree.com/thumb_back/fh260/back_pic/00/14/24/00565ab1bf5328f.jpg');
  color: #000;
  border: 2px;
}

#video {
  margin: 0 auto;
  position: relative;
  height: 0;
  overflow: hidden;
  padding-bottom: 56.25%;
  /* 16x9 aspect ratio */
  border: 2px solid red;
}

#video iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 2px solid blue;
}

@media(max-width: 1017px) {
  #video iframe {
    position: absolute;
    width: 560px;
    height: 315px;
    overflow: hidden;
    border: 2px red solid;
  }
  #video {
    position: relative;
    overflow: hidden;
    border: 2px blue solid;
  }
}

@media(max-width: 749px) {
  #video iframe {
    display: block;
    width: 560px;
    height: 315px;
    overflow: hidden;
  }
  #video {
    margin: auto 0;
    width: 560px;
    height: 315px;
    padding-bottom: 0;
    overflow: hidden;
  }
}

thank you in advanced

Answer 1

I think this what are you looking to do. If you want to control ifram place you can just add margin: 0px 90px 0px 0px; change it as you want.

    .container {
      width: 80%;
      margin: auto;
      overflow: hidden;
    }

    #showcase {
      padding: 10px;
      margin-top: 5px;
      min-height: 450px;
      text-align: center;
      background: url('https://png.pngtree.com/thumb_back/fh260/back_pic/00/14/24/00565ab1bf5328f.jpg');
      color: #000;
      border: 2px;
    }

    #video {
    position: relative;
    overflow: hidden;
    padding-bottom: 50%;
    border: 2px blue solid;
    }

    #video iframe {    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    overflow: hidden;
    border: 2px red solid;
    }
    @media(max-width: 1017px) {
  #video iframe {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    overflow: hidden;
    border: 2px red solid;
  }
  #video {
    position: relative;
    overflow: hidden;
    padding-bottom: 50%;
    border: 2px blue solid;
  }
}

@media(max-width: 749px) {
  #video iframe {
 position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    overflow: hidden;
    border: 2px red solid;
  }
  #video {
    position: relative;
    overflow: hidden;
    padding-bottom: 50%;
    border: 2px blue solid;
  }
}

HTML Code:

<section id="showcase">
 <div class="container">
<div id="video">
  <iframe src="https://www.youtube.com/embed/_lE1GYParQA" frameborder="2px 
  white solid" allowfullscreen>
    <p>Your Web browser doesn't support Iframes</p>
  </iframe>
</div>