Идеальный отзывчивый круг iFrame

Question

Как создать iFrame, который является идеальным кругом и отзывчивым? I know I can add rounded corners by surrounding the iframe with a div, но я не уверен, как я могу сделать идеальный круг.

Answer 1

Вам необходимо обернуть ваш iframe двумя div. Внутренний должен быть position: absolute;, а внешний должен быть position: relative. Вы можете использовать статическую и равную высоту и ширину, чтобы сделать ее идеальным кругом, 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> 

Однако, потому что мы живем в мире различных размеров экрана, и потому, что вы хотите идеальный круг, это полезно, чтобы добавить немного больше CSS, чтобы для этого быть отзывчивым, based on Nathan Ryan's answer to "Height Equal To Dynamic Width."

Here's a jsfiddle to demonstrate a complete solution.