Shorts korzystaja z tego samego mechanizmu osadzania co kazdy inny film YouTube, z jedna kluczowa roznica w ukladzie: sa pionowe i Twoje osadzenie musi to odzwierciedlac.
Znajdowanie ID filmu w linku Shorts
Adres URL Shorts wyglada jak youtube.com/shorts/ID_FILMU, a nie w zwyklym formacie youtube.com/watch?v=ID_FILMU. Samo ID filmu dziala dokladnie tak samo w adresie URL osadzenia w obu przypadkach; rozni sie jedynie format linku do udostepniania.
Dlaczego standardowe osadzenie wyglada zle
Jesli osadzisz Short uzywajac zwyklego responsywnego kontenera 16:9 (padding-bottom: 56,25%), otrzymasz waski pionowy film umieszczony na srodku szerokiego poziomego pola, z duzymi pustymi pasami po obu stronach. To niedopasowanie ukladu, a nie blad samego filmu.
Rozwiazanie: kontener 9:16
<div style="position:relative;width:100%;max-width:315px;padding-bottom:177.78%;height:0;overflow:hidden;margin:0 auto;">
<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 177,78% to 16 podzielone przez 9, odwrotnosc standardowej proporcji, a max-width zapobiega rozciagnieciu osadzonego Short na nienaturalnie szeroka kolumne na stronie desktopowej.
Robienie tego bez matematyki
Wklej link do Shorts w generatorze kodu osadzania, a on automatycznie wykryje adres /shorts/ i przelaczy sie na poprawny responsywny uklad 9:16 bez zadnej recznej regulacji.
Gdzie osadzenia Shorts sprawdzaja sie dobrze
Pionowe osadzenie naturalnie pasuje do paska bocznego, waskiej kolumny tresci lub dedykowanej sekcji “polecany Short”, a nie do pelnoszerokiego obszaru hero zaprojektowanego pod wideo panoramiczne.