Czym jest responsywny design?

Responsywny design oznacza, ze układ strony internetowej dostosowuje się do ekranu, na którym jest oglądaną, od małego telefonu po duży monitor stacjonarny, zamiast pozostawać w stałym rozmiarze. Zastosowany do wideo oznacza, ze odtwarzacz skaluje się z kontenerem zamiast zawsze renderować się w jednej stałej szerokości i wysokości w pikselach.

Technika padding-bottom

Najczęstszy sposób uczynienia osadzenia responsywnym to owinięcie iframe w kontener z procentowym padding-bottom (56.25% dla wideo 16:9), i pozycjonowanie iframe absolutnie wewnątrz niego na 100% szerokości i wysokości.

Nowsza alternatywa

Nowoczesny CSS obsługuje także bezpośrednio właściwość aspect-ratio, która osiąga podobny efekt z mniejsza iloscia znaczników w przeglądarkach, które ja obsługują.

Dwie główne techniki responsywnego wideo

Responsywne wymiarowanie wideo jest zazwyczaj osiągane na jeden z dwóch sposobów. Starsza, szerzej kompatybilną technika owija iframe w kontener używający procentowego padding-bottom połączonego z pozycjonowaniem absolutnym. Nowsza technika używa właściwości CSS aspect-ratio bezpośrednio na kontenerze, która jest krótsza do napisania i łatwiejsza do odczytania.

Przykład praktyczny porównujący obie techniki

<!-- Technika padding-bottom -->
<div style="position:relative;width:100%;padding-bottom:56.25%;height:0;overflow:hidden;">
  <iframe src="..." style="position:absolute;top:0;left:0;width:100%;height:100%;border:0;"></iframe>
</div>

<!-- Technika aspect-ratio -->
<div style="width:100%;aspect-ratio:16/9;">
  <iframe src="..." style="width:100%;height:100%;border:0;"></iframe>
</div>

Responsywny design a osadzenie o stałym rozmiarze

Osadzenie o stałym rozmiarze, używające dosłownych atrybutow width i height, jest prostsze do napisania, ale przestaje działać, gdy otaczająca strona jest oglądaną na ekranie węższym niż ta stała szerokość.

Testowanie na różnych urządzeniach

Sama zmiana szerokości okna przeglądarki desktopowej nie zawsze wychwytuje wszystkie problemy, ponieważ telefony i tablety mają inne proporcje ekranu oraz odmiennie obsługują orientację pionową i poziomą. Warto sprawdzić responsywne osadzenie zarówno na wąskim telefonie, jak i na szerokim monitorze zewnętrznym, aby upewnić się, ze proporcje wideo pozostają poprawne w całym zakresie realnie używanych rozmiarów ekranu.

Responsywnosc a container queries

Najnowsza specyfikacja CSS wprowadza również container queries, które pozwalają dostosować rozmiar elementu na podstawie szerokości jego kontenera, a nie całego okna przeglądarki, co może byc przydatne przy osadzaniu wideo w wąskich kolumnach bocznych obok szerszej treści głównej. To rozwiązanie jest jednak nowsze niż klasyczną technika padding-bottom i wciąż zyskuje na popularności.

Najczęściej zadawane pytania