Perfect Responsive Circle iFrame

Question

How would I create an iFrame that is a perfect circle and responsive? I know I can add rounded corners by surrounding the iframe with a div, but I'm not sure how I can make a perfect circle.

Answer 1

You need to wrap your iframe with two divs. The inner one should be position: absolute;, while the outer one should be position: relative. You can use a static and equal height and width in order to make it a perfect circle, as shown in this jsfiddle examples.

HTML

<div class="iframe-outer"><!--position: relative-->
    <div class="iframe-inner"><!--position: absolute-->
        <iframe src="www.google.com" width="600" height="450"></iframe>
    </div>
</div>

However, because we live in a world of varying screen sizes, and because you want a perfect circle, it's useful to add a little more CSS to allow for this to be responsive, based on Nathan Ryan's answer to "Height Equal To Dynamic Width."

Here's a jsfiddle to demonstrate a complete solution.