Osadzenie YouTube o stałej szerokości i wysokości wygląda dobrze na ekranie, na którym je zbudowano, i źle na każdym innym. Oto jak zrobić je naprawdę responsywnym.
Technika padding-bottom
Klasyczne rozwiązanie umieszcza iframe w kontenerze z wypełnieniem opartym na procentach zamiast stałej wysokości:
<div style="position:relative;width:100%;padding-bottom:56.25%;height:0;overflow:hidden;">n <iframe src="https://www.youtube-nocookie.com/embed/VIDEO_ID" style="position:absolute;top:0;left:0;width:100%;height:100%;border:0;" allowfullscreen></iframe>n</div>Wartość 56,25% wynika z podzielenia 9 przez 16, standardowej proporcji obrazu wideo. Dla pionowych filmów typu Shorts użyj zamiast tego 177,78% (16 podzielone przez 9).
Nowocześniejsza alternatywa
Obecny CSS obsługuje też bezpośrednio właściwość aspect-ratio, krótszą w przeglądarkach, które ją wspierają:
<div style="width:100%;aspect-ratio:16/9;">n <iframe src="..." style="width:100%;height:100%;border:0;" allowfullscreen></iframe>n</div>Przetestuj samodzielnie
Zmniejszaj i zwiększaj okno przeglądarki, gdy osadzenie jest widoczne, i sprawdź, czy odtwarzacz skaluje się płynnie, bez czarnych pasów i zniekształceń.
Bez ręcznego CSS
Nasz generator kodu osadzania automatycznie tworzy poprawnie proporcjonalny responsywny kontener, w tym wersję 9:16 dla Shorts.