JSFiddle - React, Tailwind, and code Playground

HTML

<div class="iframe-outer">
    <div class="iframe-inner">
        <iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d3456.006819990295!2d31.134202!3d29.979233999999998!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x14584587ac8f291b%3A0x810c2f3fa2a52424!2sThe+Great+Pyramid+at+Giza!5e0!3m2!1sen!2sus!4v1416119726867" width="600" height="450" frameborder="0" style="border:0"></iframe>
    </div>
</div>

CSS

.iframe-outer {
    display: inline-block;
    position: relative;
    width: 50%;
    margin-left: 25%;
}

    .iframe-outer:after {
        content: '';
        display: block;
        margin-top: 100%;
    }

.iframe-inner {
    overflow: hidden;
    border-radius: 5000px;
    transition: all ease .2s;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

    .iframe-inner iframe {
        height: 120%;
        width: 120%;
    }