JSFiddle - React, Tailwind, and code Playground

HTML

<div class="row relation">
    <div class="relation__offset"></div>
    <div class="relation__content">
        <iframe src="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d10589.949510612161!2d135.1135804!3d48.42798505!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sru!2sru!4v1509419850276" width="100%" height="100%" frameborder="0" style="border:0" allowfullscreen></iframe>
    </div>
</div>

CSS

.relation {
  position: relative;
}
.row .relation__offset {
  padding-top: 33%;
}
.relation__offset {
  height: 0;
}
.relation__content {
  background-color: #000;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}