Вбудований контент iframe

Раніше було популярно робити сайти за технологією фреймів. Хедер, футер, бокова панель прописувались в окремих html-файлах, контентна частина також знаходилася в окремих файлах. Головний файл index.html містив в собі тільки 2, 3, 4 фрейма і підгружав в один з фреймів потрібний контент.

Зараз ця технологія не використовується з багатьох причин.

iframe - переродження фреймів. Цей тег - це контейнер для інформації. У нього можна завантажити іншу веб-сторінку, сторінку з іншого сайту, pdf-документ, відео та інший контент.

Наприклад, відео з youtube вставляється через iframe, карти гугла також.

Основний атрибут - src, в значення цього атрибута прописується посилання на ресурс.

Завдання: створіть html-документ (jsFiddle для цього не підходить) і створіть в ньому iframes:
- pdf-документом;
- відео з ютуба;
- карту гугла.

Контейнер iframe є безпечним. Ви ніяким чином не можете вплинути на його вміст зі свого сайту: змінити стилі елементів, застосувати скрипти, програмно зчитати його вміст.

Тому цим контейнером часто користуються платіжні системи, системи авторизації користувачів типу OpenID і т.п.

Проте, не кожен сайт можна запхати у iframe, можна заборонити це робити зі своїм сайтом.

Лайфхак для адаптивного відео.

В iframe чи в css ви можете задати чіткі розміри фрейма, наприклад - відео з ютуба. При цьому якщо задати ширину фрейма у відсотках - його висота не буде пропорційно змінюватися так, як це роблять картинки з автоматичною висотою.

Але нам допоможе padding. Якщо вертикальні відступи задати у відсотках, то висота буде братися не від висоти батьківського елемента, а від його ширини.

Нехай у нас є відео з розширенням 640 х 420 px. Визначемо співвідношення висоти до ширини: 420 / 640 = 0.66 = 66%. Ось це значення і задамо для padding-top чи padding-bottom обгортки фрейма.

Приклад у jsFiddle (замість фрейма - span, різниці немає; змінюйте ширину екрана фіддла).

Сайт Укрзалізниці з розкладом електричок у іframe:

Домашнє завдання

1. Вставте у проект iframe з курсом валют.
2. Вставте у проект iframe з погодою

Деякі iframe будуть працювати тільки в онлайні, по протоколам http чи https, може знадобитися веб-сервер або github.io; окрім того багато сервісів працюють через спеціальні ключі - API-key, їх можна отримати зареєструвавшись на сайті, у деяких випадках - оплативши послугу.