title: Can't set iframe video to a responsive size centered to page
body: <p>I am trying to have my iframe video center to page and also resize. I have tried setting the height to a viewpoint height and using 100% for the width. I have also tried to take in the padding to half of the page. When I give the div a height the video resizes to the div - even when the size is smaller. Right now setting the margin and adding a max width works but I am trying to resize the video with no resolve.</p>
  <p><strong>HTML</strong></p>
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang=&quot;en&quot;&gt;
  
  &lt;head&gt;
      &lt;meta charset=&quot;UTF-8&quot;&gt;
      &lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=edge&quot;&gt;
      &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
      &lt;link href=&quot;style.css&quot; rel=&quot;stylesheet&quot; /&gt;
      &lt;script src=&quot;https://kit.fontawesome.com/a16d2517bd.js&quot; crossorigin=&quot;anonymous&quot;&gt;&lt;/script&gt;
      &lt;title&gt;Keith McDonald Plumbing | Commercial&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;nav&gt;
          &lt;div class=&quot;logo_header&quot;&gt;
              &lt;a href=&quot;./home.html&quot;&gt;&lt;img src=&quot;https://cdn-icons-png.flaticon.com/512/2301/2301541.png&quot;
                      alt=&quot;Site Name&quot; /&gt;&lt;/a&gt;
              &lt;h1&gt;Keith McDonald Plumbing&lt;/h1&gt;
          &lt;/div&gt;
          &lt;ul class=&quot;navigation_links&quot;&gt;
              &lt;/li&gt;
              &lt;!--Align skunk with menu items. Make sure it doesn't glow.--&gt;
              &lt;li&gt;&lt;a href=&quot;./about.html&quot;&gt;ABOUT&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href=&quot;./commercial.html&quot;&gt;COMMERCIAL&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href=&quot;./employment.html&quot;&gt;EMPLOYMENT&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href=&quot;./services.html&quot;&gt;SERVICES&lt;/a&gt;&lt;/li&gt;
              &lt;/li&gt;
          &lt;/ul&gt;
          &lt;div class=&quot;burger&quot;&gt;
              &lt;div class=&quot;line1&quot;&gt;&lt;/div&gt;
              &lt;div class=&quot;line2&quot;&gt;&lt;/div&gt;
              &lt;div class=&quot;line3&quot;&gt;&lt;/div&gt;
          &lt;/div&gt;
      &lt;/nav&gt;
      &lt;script src=&quot;./app.js&quot;&gt;&lt;/script&gt;
      &lt;section id=&quot;hero&quot;&gt;
          &lt;div class=&quot;container&quot;&gt;
              &lt;div class=&quot;info&quot;&gt;
                  &lt;h2&gt;Commercial&lt;/h2&gt;
              &lt;/div&gt;
              &lt;div class=&quot;info&quot;&gt;
                  &lt;h3&gt;We gotcha' covered!&lt;/h3&gt;
              &lt;/div&gt;
              &lt;div class=&quot;info&quot;&gt;
                  &lt;a href=&quot;#&quot;&gt;Request Service&lt;/a&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/section&gt;
      &lt;main&gt;
          &lt;div class=&quot;vid_com&quot;&gt;
              &lt;iframe src=&quot;https://www.youtube.com/embed/rVVsJa6LOeM&quot; title=&quot;YouTube video player&quot; frameborder=&quot;0&quot;
                  allow=&quot;accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture&quot;
                  allowfullscreen&gt;&lt;/iframe&gt;
          &lt;/div&gt;
      &lt;/main&gt;
      &lt;footer&gt;
          &lt;section class=&quot;footer_social&quot;&gt;
              &lt;div class=&quot;social&quot;&gt;&lt;a href=&quot;https://twitter.com/&quot;&gt;&lt;i class=&quot;fa-brands fa-twitter-square&quot;&gt;&lt;/i&gt;&lt;/a&gt;&lt;/div&gt;
              &lt;div class=&quot;social&quot;&gt;&lt;a href=&quot;https://www.facebook.com&quot;&gt;&lt;i class=&quot;fa-brands fa-facebook-square&quot;&gt;&lt;/i&gt;&lt;/a&gt;
              &lt;/div&gt;
              &lt;div class=&quot;social&quot;&gt;&lt;a href=&quot;https://www.instagram.com/?hl=en&quot;&gt;&lt;i
                          class=&quot;fa-brands fa-instagram-square&quot;&gt;&lt;/i&gt;&lt;/a&gt;&lt;/div&gt;
          &lt;/section&gt;
          &lt;ul class=&quot;navigation_links_footer&quot;&gt;
              &lt;/li&gt;
              &lt;!--Align skunk with menu items. Make sure it doesn't glow.--&gt;
              &lt;li&gt;&lt;a href=&quot;&quot;&gt;ABOUT&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href=&quot;&quot;&gt;COMMERCIAL&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href=&quot;&quot;&gt;EMPLOYMENT&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href=&quot;&quot;&gt;SERVICES&lt;/a&gt;&lt;/li&gt;
              &lt;/li&gt;
          &lt;/ul&gt;
          &lt;h4&gt;Contact Us&lt;/h4&gt;
          &lt;p&gt;keithmcdonald@plumbing.com&lt;/p&gt;
      &lt;/footer&gt;
      &lt;div&gt;
  
      &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  <p><strong>CSS</strong></p>
  <pre><code>* {
      margin: 0 auto;
      padding: 0;
      box-sizing: border-box;
      font-family: sans-serif;
  }
  
  html {
    scroll-behavior: smooth;
    margin: 0 auto;
  }
  
  /*
  grey:#666666
  dark blue: #204060
  blue: #336699
  red: #F20505
  white: #FFFFFF
  */
  
  /* NAV BAR */
  
  nav {
      display: flex;
      justify-content: space-around;
      align-items: center;
      min-height: 15vh;
      background-color: white;
      width: 100%;
  }
  
  .logo_header {
      color: #204060;
      text-transform: uppercase;
      letter-spacing: 5px;
      display: inline-flex;
      padding-right: 10%;
      width: 40%;
  }
  
  .logo_header a{
      padding-right: 3%;
  }
  
  .logo_header img{
      width: 2em;
      padding-right: 3%;
  }
  
  .navigation_links {
      display: flex;
      text-decoration: none;
      width: 30%;
      background-color: white;
  }
  
  .navigation_links a {
      color: #204060;
      text-decoration: none;
  }
  
  .navigation_links a:hover {
      font-weight: bold;
      text-decoration: underline;
  }
  
  .navigation_links li {
      list-style: none;
  }
  
  .burger {
      display: none;
      cursor: pointer;
  }
  
  .burger div{
      width: 25px;
      height: 3px;
      background-color: #204060;
      margin: 5px;
  }
  
  
  @media screen and (max-width:1736px){
      .logo_header a{
      padding-right: 3%;
      padding-left: 5%;
  }
  }
  
  @media screen and (max-width:1280px){
      .navigation_links {
          width: 60%;
      }
  }
  @media screen and (max-width:768px){
      body{
         overflow-x: hidden;
      }
  
      .navigation_links {
          position: absolute;
          right: 0;
          height: 26vh;
          top: 15vh;
          background-color: #204060;
          color: #204060;
          display: flex;
          flex-direction: column;
          align-items: center;
          width: 100%;
          transform: translatex(100%);
          transition: transform 0.5s ease-in;
      }
  
      .navigation_links a {
      color: white;
      text-decoration: none;
      }
      
      .navigation_links li {
          padding: 2vh;
      }
  
      .burger {
          display: block;
          cursor: pointer;
      }
  
  }
  
  .nav_active{
      transform: translatex(0%);
  }
  
  /* HERO BOX */
  
  #hero {
      height: 65vh;
      background: linear-gradient(to bottom, rgba(245, 246, 252, 0.52), #336699), url(https://scontent-atl3-2.xx.fbcdn.net/v/t31.18172-8/28516625_1598055023650084_5608745362596556363_o.jpg?_nc_cat=101&amp;ccb=1-7&amp;_nc_sid=e3f864&amp;_nc_ohc=ydWG8T9iKucAX8wEQ-V&amp;_nc_ht=scontent-atl3-2.xx&amp;oh=00_AT9aRGA5yl35nf6769WG8cFz8NlXwhqsaM9HxahErVehJA&amp;oe=62EE5264) no-repeat center /  cover;
      background-color: #204060;
      color: #F20505;
  }
  #hero img {
      height: 80em;
  }
  
  #hero h2{
      font-size: 50px;
  }
  
  #hero h3 {
      color: white;
      font-size: 25px;
  }
  
  .container {
      width: 90%;
      height: 100%;
      max-height: 50px;
      padding:8vw;
  }
  
  .info {
      margin-top: 2vh;
  }
  
  .info a {
      background-color: #F20505;
      text-decoration: none;
      color: white;
      padding: 5px;
      border-radius: 10px;
      border: 1px solid #F20505;
  }
  
  .info a:hover {
      font-weight: bold;
  }
  
  @media screen and (max-width:600px){
      .logo_header {
          display: none;
      }
      #hero {
      height: 675px;
  }
  
  .about-column {
      display: inline;
  }
  
  }
  
  /* HOME INFO SECTION */
  main {
      height: min-content;
  }
  
  .service {
      background-color: #336699;
      height: min-content;
      padding: 5vh 0vh 5vh 0vh;
      color: white;
  }
  
  .row {
      display: flex;
      width: 70%;
  }
  
  .service-column {
      flex: 30%;
      text-align: right;
      padding: 1em;
  }
  
  .about-column {
      flex: 70%;
      text-align: left;
      margin: 3em;
  }
  
  main h1 {
      margin-top: 2vh;
      text-align: center;
      height: 10%;
      width: 100%;
      padding: 1vw;
  }
  
  /* Location Section */
  
  .location {
      background-color: #336699;
      height: min-content;
      padding: 1vh 0vh 1vh 0vh;
      color: #F20505;
  }
  
  .location h1 {
      padding: 0 auto;
  }
  /* Member Logo Section */
  .member {
      text-align: center;
      background-color: #c9dbed;
      height: min-content;
      padding: 5vh;
  }
  
  .member h4, h5 {
      color: #F20505;
  }
  
  .member_logo img{
      width: 300px;
      padding: 1vw;
  }
  
  .top_button {
      color:#F20505;
      text-decoration: none;
  }
  
  .top_button:hover {
      text-decoration: underline;
  }
  
  /* Footer */
  footer{
      background-color: #336699;
      height: min-content;
      padding: 2vh 0vh;
      color: #F20505;
      padding: 2vh;
      color:#c9dbed;
  }
  
  footer .social {
      text-align: center;
      padding-bottom: 25px;
      color:#c9dbed;
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      display:inline-block;
  }
  
  footer .social i {
      text-align: center;
      padding-bottom: 25px;
      color:#c9dbed;
  }
  
  footer .social a {
      font-size: 24px;
      text-align: center;
      text-decoration: none;
      list-style: none;
  }
  
  footer ul {
      text-decoration: none;
      list-style: none;
  }
  
  footer ul a {
      text-decoration: none;
      font-weight: 500;
      color:#c9dbed;
  }
  footer ul a:hover {
      text-decoration: none;
      font-weight: 700;
  }
  
  footer h4 {
      color:#c9dbed;
      margin-top: 2em;
      
  }
  
  /* COMMERCIAL */
  
  .vid_com {
      margin: auto;
      max-width: 300px;
  }
  
  iframe {
      width: 100%;
      height: 600px;
  }
  </code></pre>
  <p><strong>JS</strong></p>
  <pre><code>const navSlide = () =&gt; {
      const burger = document.querySelector('.burger');
      const nav = document.querySelector('.navigation_links');
  
      burger.addEventListener('click',() =&gt;{
          nav.classList.toggle('nav_active'); 
      });
  }
  
  
      navSlide();
  </code></pre>