Osadzenie YouTube o stalej szerokosci i wysokosci wyglada dobrze na ekranie, na ktorym je zbudowales, i psuje sie na kazdym innym. Oto jak sprawic, by zamiast tego poprawnie sie skalowalo.
Problem ze stalym rozmiarem
Domyslny kod osadzania YouTube ustawia dokladna szerokosc i wysokosc w pikselach, na przyklad 560 na 315. Na duzym monitorze biurkowym moze to wygladac na male; na waskim ekranie telefonu moze calkowicie wystawac poza strone, zmuszajac odwiedzajacego do przewijania w bok. Zadne z tych rozwiazan nie jest dobrym doswiadczeniem.
Technika padding-bottom
Standardowa naprawa umieszcza iframe w kontenerze, ktorego rozmiar okresla procentowy padding-bottom zamiast stalej wysokosci, a sam iframe pozycjonuje sie absolutnie, aby wypelnil ten kontener:
<div style="position:relative;width:100%;padding-bottom:56.25%;height:0;overflow:hidden;">
<iframe src="https://www.youtube-nocookie.com/embed/ID_FILMU" style="position:absolute;top:0;left:0;width:100%;height:100%;border:0;" allowfullscreen></iframe>
</div>Wartosc 56,25% pochodzi z podzielenia 9 przez 16, standardowej proporcji wideo. Poniewaz szerokosc kontenera jest ustawiona na 100% elementu nadrzednego, a jego wysokosc jest obliczana jako procent tej szerokosci, pole zachowuje idealny ksztalt 16:9 niezaleznie od tego, jak szeroka jest otaczajaca strona.
Wersja dla Shorts
Filmy pionowe, jak YouTube Shorts, uzywaja odwrotnej proporcji. Zamien padding-bottom na 177,78% (16 podzielone przez 9) i ta sama technika zachowa poprawny ksztalt 9:16.
Prostsza, nowoczesna alternatywa
Aktualne CSS obsluguje bezposrednio wlasciwosc aspect-ratio, ktora moze zastapic sztuczke z padding-bottom w przegladarkach ja wspierajacych:
<div style="width:100%;aspect-ratio:16/9;">
<iframe src="https://www.youtube-nocookie.com/embed/ID_FILMU" style="width:100%;height:100%;border:0;" allowfullscreen></iframe>
</div>Jest krotsza i latwiejsza do odczytania, choc metoda padding-bottom pozostaje bezpieczniejszym domyslnym wyborem, jesli musisz wspierac starsze przegladarki.
Wlasciwe testowanie
Zmieniaj szerokosc okna przegladarki, gdy osadzenie jest widoczne na ekranie (lub uzyj panelu urzadzen w przegladarce, aby zasymulowac telefon) i potwierdz, ze odtwarzacz skaluje sie plynnie, bez czarnych pasow, wystawania poza strone czy rozciagania. To dokladnie ten rodzaj sprawdzenia, ktory warto wykonac przed publikacja kazdej strony z osadzonym filmem.
Pomin reczny CSS
Nasz generator kodu osadzania automatycznie generuje poprawnie proporcjonowany responsywny kontener, w tym wersje 9:16 dla Shorts, wiec nie musisz sam pamietac tych procentow.