Как да направим вграденият Iframe отзивчив (responsive)?

Вграждане с iframe

Методът с тага iframe се използва, за да се добави възможност за вграждане на плейър или уеб страници в среди, които не позволяват script, като много CMS. За разлика от другите опции, той не позволява API достъп до плейъра и може да изисква ръчно редактиране, за да се регулира ширината и височината в зависимост от активираните функции на плейъра. При това положение е ясно, че няма да се вижда еднакво добре на всякакви размери дисплеи. Как да направим вграденият iframe отзивчив (responsive)?

Ще започна отначалото – с пример с вграждане с iframe на видео с използване на оптимизирана поверителност:

Кодът в случая зглежда така:

<iframe width="560" height="315" 
  src="https://www.youtube-nocookie.com/embed/_RvrDCr1-18" 
  frameborder="0" 
  allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" 
  allowfullscreen>
</iframe>

(adsbygoogle = window.adsbygoogle || []).push({});

Как да направим отзивчив вграден iframe чрез CSS Inline?

Пропорционално преоразмеряване (за да станат отзивчиви рамки) е малко комплексно. Достатъчно лесно е, да направим ширината width на iframe 100% от контейнера, в който ще я вмъкнем, задължително. Но правилното оразмеряване на височината height може да бъде сложно. В никой случай няма да използваме JavaScript за iframe отзивчиво.

1. Вземаме кода на видеото и го поставяме в HTML страница.
2. Махаме атрибутите за височина height и ширина width. Запазването на тези атрибути принуждава съдържанието да остане в този размер, независимо от размера на екрана. Това причинява проблеми при отзивчивите оформления, когато размерът на екрана е по-малък от ширината на рамката.
3. Премахваме frameborder атрибута, който не се поддържа в HTML5 и го заместшаме с border на CSS.
4. Добавяме контейнер container div около iframe, както е показано от следния примерен код.
5. Задаваме име id на тага iframe.
6. Задаваме атрибутите за височина height и ширина width  на тага iframe на 100%, така че iframe да заема 100% от пространството на контейнера. Тези декларации карат кутията да се разтяга, за да запълни височината и ширината на нейния контейнер.
7. Важно е да определим контейнера с position relative. Това ни позволява абсолютно да позиционираме iframe вътре в него – absolute, което е необходимо, за да го направи отзивчив.
8. Променяме CSS позицията на iframe на „абсолютна“ absolute (това освобождава елемента от границата на височината на контейнера, в който ще го сложим) и задаваме левия left и горния top  CSS параметри на „0“ (позиционираме кутията на iframe в близост до горната част на контейнера).
9. Стойността на параметъра padding-bottom се изчислява от пропорцията на съдържанието (в случай на 9:16 е 9/16 = 0,5625).  Ако видеото има формат, различен от 16: 9, с това изчисление може да се установи правилния процент: (височина на видеото x 100) / ширина. Например в случай на видеоклипове в 3 : 4 (височина към ширина на видеото) процентът, който се въвежда, е 75%
10. height на контейнера е зададен 0 или auto, защото padding-bottom дава височината на iframe.
11. Използването на overflow: hidden е важно, защото гарантира, че ако съдържанието излезе извън контейнера, то ще бъде скрито и ще се избегне развалянето на оформлението на сайта.
12. display: block показва контейнера като блоков елемент. Започва на нов ред и заема цялата ширина.

Виж още: Пищови по HTML, CSS, JavaScript

<div id= "Container"
style= padding-bottom: 56.25%;
position: relative; display: block; border: 0;overflow: hidden;
width: 100%; height: auto>
<iframe id="YoutubeIframe"
width="100%" height="100%"
src="https://www.youtube-nocookie.com/embed/_RvrDCr1-18"
allowfullscreen=""
style="position: absolute; top: 0; left: 0;">
</iframe>
</div>

Как да направим отзивчиво iframe на кода на YouTube чрез CSS Internal?

Ето CSS кода за div клас, и за самия iframe, отделени във вътрешен стил, който можем да добавим към допълнителните CSS в настройката на уеб страницата или в опците на темата:

<style>
.container video{
    position: relative;
    padding-bottom: 56.25%;
    display: block;
    overflow: hidden;
    width: 100%;
    height: auto;
}
.video iframe {
    position: absolute;
    border: 0; top: 0; left: 0; width: 100%; height: 100%; } </style> 

И отделно div контейнерът, който съдържа iframe и който поставяме в HTML кода на желаното място в публикацията:

<div class="container video">
<iframe src="https://www.youtube-nocookie.com/embed/_RvrDCr1-18" 
allowfullscreen="";">
</iframe> 
</div>

Отзивчиво вграждане на Google карти

Описаният горе код е предназначен да оптимизира включването на видео (пропорциите са специфични за тази цел), но може да се прилага и за включване на уеб страници.
В този случай е важно страницата, която е вградена в iframe,  да отговаря на пропорциите, които ще определим в padding-bottom. Освен това, важно е html страницата, включена в iframe, също да е отзивчива, в противен случай тя няма да може да мащабира заедно с контейнера div.

Пример за получаване на iframe отзивчив, при вграждане на Google Maps:

<style>
.google-maps {
  position: relative;
  padding-bottom: 90%;
  width: 100%;
  height: 0;
  overflow: hidden;
}
.google-maps iframe {
  position: absolute;
  top: 0;
  left: 0;
  border:0;
  width: 100%;
  height: 100%;
} 
</style>
<div class="google-maps">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d187673.30870104616!2d23.183861007388955!3d42.69534680097388!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x40aa8682cb317bf5%3A0x400a01269bf5e60!2sSofia%2C+Bulgaria!5e0!3m2!1sit!2sit!4v1564566816950!5m2!1sit!2sit" allowfullscreen></iframe>
</div>

Ето резултатът:

See the Pen
Responsive iframe Google Map by Ivanka Grigorova (@ivankagrigorova)
on CodePen.

Заключение

Вграденото съдържание може да наруши адаптивното маркиране, тъй като се съдържа в рамка iframe с фиксирана ширина. Тази публикация показва как да се добавят контейнер (container) и някои CSS, за да се гарантира преоразмеряването на вграденото съдържание в iframe заедно с прозореца на браузъра.