对不起，我真的不能进入调整你的css现在，但这里有一个小东西，我想出了当我需要输出的iframes的YouTube视频。尝试一下

<style>
       #mediaPlayer{
        position: relative;
        height: auto;
        padding-bottom: 56.25%;
        padding-top: 1.875em; 
        overflow: hidden;
        border: 0.1875em double #185875; 
        background-image:url('../video_loading.gif'); 
        background-repeat: no-repeat;
        background-size: cover;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-position: center;
        background-attachment: fixed;
        /*to adjust the height and width*/
        margin-right: 20%;
        margin-left: 20%;
        margin-top: 20%;
        margin-bottom: 20%;
        /*or you can use it in single line*/
        margin:20%;
        /*or if you want different margins for different sides in a single line*/
        margin: 20% 20% 20% 20%;
        /* the above means margin: top right bottom left; */
       }

    #mediaPlayer iframe{
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        max-width: 100%;
        max-height: 100%;   
    }
</style>

/*instead of using margin just add a div and specify the exact height and width you want*/ 
<div style="height: 50%; width:50%;">
 <center>
  <div id="mediaPlayer">
    <iframe id="play_now" width="100%" height="100%" src="" value="" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
  </div>
 </center>
</div>

video_loading.gif背景通常是一个好主意，对于网络速度较慢的用户来说，在加载iframe内容时在背景中有一些东西
但是你必须找到你自己唯一的gif文件/图像并且在background-image:url('../file-location-here.gif');中设置它的位置
只要用上面的代码替换你的<div class="box"></div>，让我知道结果如何。

下面的例子怎么样？解来自Responsive iframe (google maps) and weird resizing。通过调整padding-top和padding-bottom，你可以改变大小。

$(document).ready(function() {
    $(".menu-icon").on("click", function() {
          $("nav ul").toggleClass("showing");
    });
});

// Scrolling Effect

$(window).on("scroll", function() {
    if($(window).scrollTop()) {
          $('nav').addClass('black');
    }

    else {
          $('nav').removeClass('black');
    }
})

.box {
  position: relative;
  padding-bottom: 56.25%;
  padding-top: 25px;
  height: 0;
  overflow: hidden;
}

.box iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
}

html, body {
    margin: 0;
    padding: 0;
    width: 100%;
}

body {
    font-family: "Helvetica Neue",sans-serif;
    font-weight: lighter;
    height:100%;

}


.content {
    width: 94%;
    margin: 4em auto;
    font-size: 20px;
    line-height: 30px;
    text-align: justify;
}

nav.black .logo {
    color: #fff;
}

nav.black ul li a {
   color: #fff;
}

.menu-text {
    color: #000;
    z-index:1;
}


.logo {
    line-height: 60px;
    position: fixed;
    float: left;
    margin: 16px 46px;
    color: #000;
    font-weight: bold;
    font-size: 20px;
    letter-spacing: 2px;
    z-index: 0;
}

nav {
    position: fixed;
    width: 100%;
    line-height: 60px;
}

nav ul {
    line-height: 60px;
    list-style: none;
    background: rgba(0, 0, 0, 0);
    overflow: hidden;
    color: #fff;
    padding: 0;
    text-align: right;
    margin: 0;
    padding-right: 40px;
    transition: 1s;
}

nav.black ul {
    background: #000;
}

nav ul li {
    display: inline-block;
    padding: 16px 40px;;
}

nav ul li a {
    text-decoration: none;
    color: #fff;
    font-size: 16px;
}

.menu-icon {
    line-height: 60px;
    width: 100%;
    background: #000;
    text-align: right;
    box-sizing: border-box;
    padding: 15px 24px;
    cursor: pointer;
    color: #fff;
    display: none;
}

@media(max-width: 786px) {

    .logo {
          position: fixed;
          top: 0;
          margin-top: 16px;
    }

    nav ul {
          max-height: 0px;
          background: #000;
    }

    nav.black ul {
          background: #000;
    }

    .showing {
          max-height: 34em;
    }

    nav ul li {
          box-sizing: border-box;
          width: 100%;
          padding: 24px;
          text-align: center;
    }

    .menu-icon {
          display: block;
    }

}

<!DOCTYPE html>
<html lang="en">
  <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Responsive Sticky Navbar</title>
        <link rel="stylesheet" href="location-style.css">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
        <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
  </head>
  <body>
    <div class="wrapper">
      <header>
        <nav>
            <div class="menu-icon">
                <i class="fa fa-bars fa-2x"></i>
            </div>

            <div class="logo">
                Croydon Cycles
            </div>

            <div class="menu">
                <ul>
                    <li><a class="menu-text" href="index.html">Home</a></li>
                    <li><a class="menu-text" href="location.html">Location</a></li>
                    <li><a class="menu-text" href="shop.html">Shop</a></li>
                    <li><a class="menu-text" href="contact.html">Contact</a></li>
                </ul>
            </div>
        </nav>
      </header>
    </div>
    <div class="box">
            <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d11180.547025315635!2d-0.1158441147859454!3d51.38130328678796!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x4876072fde46e81d%3A0x8d9bd9aaec99a20!2sLondon+Rd%2C+Croydon+CR0+2RE!5e0!3m2!1sen!2suk!4v1535311898666" allowfullscreen></iframe>


    </div>


    </div>

  </body>
</html>

您也可以尝试使用CSS变量：
一个一个三个一个一个一个一个一个四个一个一个一个一个一个五个一个

你在寻找类似的东西吗？把下面的代码添加到你的css中，看看它是否起到了作用。

iframe {
  height: 100vh;
  width: 100vw;
  box-sizing: border-box;
}

查看使用视口百分比