Делаем iframe адаптивным ⇐ CSS

[Anonymous]

Я читал «Можете ли вы сделать iFrame адаптивным?», и один из комментариев/ответов привел меня к этому JSFiddle.
Но когда я попытался реализовать HTML и CSS в соответствии с требованиями мои потребности, у меня не было таких же результатов/успеха. Я создал свой собственный JSFiddle, чтобы показать вам, что у меня он работает по-другому. Я уверен, что это как-то связано с типом iFrame, который я использую (например, изображения продуктов тоже должны быть адаптивными или что-то в этом роде?)
Моя главная проблема заключается в том, что когда читатели моего блога посещают мой блог на своем iPhone, я не хочу, чтобы все было шириной x (100% для всего моего контента), а затем iFrame ведет себя неправильно и становится единственным элементом шире (и, следовательно, выступает за все остальные содержание - если что имеет смысл?)
Кто-нибудь знает, почему это не работает?
Вот HTML и CSS моего JSFiddle (если вы не хотите чтобы нажать на ссылку):

Код: Выделить всё

.wrapper {
width: 100%;
height: 100%;
margin: 0 auto;
background: #ffffff;
}

.h_iframe {
position: relative;
}

.h_iframe .ratio {
display: block;
width: 100%;
height: auto;
}

.h_iframe iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

Код: Выделить всё

[img]http://www.brightontheday.com/wp-content/uploads/2013/07/placeholder300.png[/img]

http://currentlyobsessed.me/api/v1/get_widget?wid=30&blog=Brighton+The+Day&widgetid=38585

Подробнее здесь: https://stackoverflow.com/questions/178 ... responsive