iFrae Circle

by Roman

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, .iframe-inner {
    height: 300px;
    width: 300px;
}

.iframe-outer {
    display: inline-block;
    position: relative;
}

.iframe-inner {
    overflow: hidden;
    border-radius: 5000px;
    position: absolute;
}

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