Наступна секція проекту "Україна незламна!" буде темного кольору, реалізована у блоці класу .dark. Цей блок мімстить блок .container для обмеження вмісту по ширині 1200рх, блок .dark-text з заголовком другого рівня та параграфом. Ці блоки уже стилізовані раніше, тому нема потреби повертитсь до їх стилізації знову.
У блоці .dark буде розміщуватись ще блок флекс-контейнера .dark-container (він уже раніше стилізований з застосуванням методу flexbox) з двома флекс-елементами: .dark-verse (блок з віршем) та .dark-img (блок з зображенням) - цей блок теж був стилізований раніше, тому залишається без змін у файлі style.css.
Наступним у секції .dark буде блок .dark-video з адаптивним відео, який займає всю ширину батьківського блоку.
В цілому html-код цієї секції виглядає наступним чином:
У цій секції залишились не стилізованими два блоки .dark-verse та .dark-video.
Блок .dark-verse містить вірш. В html-коді важливо відверстати вірш так, як він має виглядати на веб-сторінці: з відступом злівого боку та інтервалами між стовпчиками!
Щоб цей вигляд зберігся під час відображення у вікні браузера, до блоку .dark-verse потрібно застовувати стилізацію з застосуванням властивості white-space: pre-wrap;
Властивість white-space вказує браузеру, як обробляти пробіли у тексті.
Значення pre-wrap зерігає послідовності пробілів так, як вони вказані у джерелі. Рядки переносяться лише там, де в джерелі вказані символи нового рядка і там, де в джерелі вказані елементи <br>, і при необхідності для заповнення малих боксів.
Залишилось стилізувати блок .dark-video
Відео з YouTube або Vimeo додається на сторінку за допомогою елемента <iframe>. Для управління адаптивністю відеоплеєра цей код <iframe> обгортається додатковим блоком з класом .dark-video.
Отримати код кадру Vimeo можна за кнопкою Share, далі значок тега. На YouTube потрібно клацнути правою кнопкою миші на відео, далі «Копіювати HTML-код»
за кодом видно що за замовчуванням для відео вже задані розміри плеєра. Спочатку розміри такі - 560 пікселів ширина і 315 пікселів висота. На великому екрані і при нормальній ширині вашого сайту, такий розмір цілком допустимий, але якщо ширина екрану пристрою 420 пікселів? Результат - плеєр вилазить за межі видимої частини і сайт виглядає криво і неправильно. Як же вирішити дану задачу?
Інколи пропонують рішення коли прибирають з коду iframe значення розмірів, а потім просто через стилі CSS задають розміри плеєра для певної роздільної здатності екрану. Варіант допустимий, але трудомісткий і не завжди правильно відображається на сайті. Тим не менше, цілком робочий.
Є більш простий спосіб. При його використанні плеєр буде чітко підлаштовуватися під розмір вікна браузера і коректно відображатися при будь-якій роздільній здатності екрану. Це реалізувати можна додавши універсальні стилі, які і будуть адаптувати розмір плеєра YouTube.
По суті ми робимо адаптивним наш батьківський блок, а сам плеєр робимо з абсолютним позиціюванням і розтягуємо на всю ширину і висоту щодо батьківського блоку.
Для блоку основним параметром, на який слід звернути увагу, є - padding-bottom:56.25%. Він задає висоту батьківського блоку для плеєра у якого відеоролик має співвідношення сторін 16:9. Якщо відеоролик має співвідношення 4:3, то параметр буде - padding-bottom:75%.
Після виконаної роботи,можна перевірити результат. Тепер відео з YouTube адаптується під ширину блоку в якому воно знаходиться.
