Как адаптивно сверстать идеально круглые блоки с контентом на CSS?

На первый взгляд дико смотрится, но суть в следующем.
Первый блок отвечает за ширину, но высоты и контента непосредственно в нем нет.
Второй блок внутри первого не имеет высоты тоже, но получает padding-top в процентах, а как известно, паддинг в процентах считается от ШИРИНЫ РОДИТЕЛЯ, а не от высоты, таким образом указывая паддинг-топ в разных процентах получаем разное соотношения высоты к ширине, для круга нужно указать 100%, то есть 1:1, а для встраивания, например видео с ютуба, адаптивно, указываем 56,9%, в таком случае ширина к высоте будет 16:9.
Но! Указав паддинг у нас нет места для контента, ведь если добавить контент во второй блок высота изменится и пропорция нарушится. Поэтому второму блоку задаем позиционирование, и в него же вкладываем третий блок с позиционированием абсолют относительно второго блока и растягиваем третий блок по ширине и высоте, а в него вкладывать можно все, что вздумается.
Чтоб все хорошо работало еще не плохо бы добавить box-sizing: border-box и overflow: hidden, это по вкусу)

Dima Polos, спасибо, сделал по этому принципу.