Metoda I (starsza) – padding-bottom

Metoda wymaga umieszczenia ramki w dodatkowym kontenerze <div> oraz dopisania styli css do ramki <iframe>: (style= „width:100%; height:100%; position:absolute; left:0px; top:0px; „) oraz zmiany parametrów wysokości i szerokości ramki na 100%. Do kontenera <div> dodajemy następujące style: (style=”position:relative; padding-bottom:56.25%;”) gdzie w regule „padding-bottom” wpisujemy odpowiednią wartość procentową zgodnie z poniższą tabelą

ASPECT RATIO	PADDING BOTTOM
1:1	100%
16:9	56,26%
4:3	75%
3:2	66,66%
8:5	62,5%

<!-- HTML --> 

<!--KONTENER -->
<div style="position:relative;padding-bottom:56.25%;">

<!-- RAMKA Z ZEWNĘTRZNĄ ZAWARTOŚCIĄ -->
<iframe style= "width:100%; height:100%; position:absolute; left:0px; top:0px;" width="100%" height="100%" src="https://www.youtube.com/embed/Re2BclGmw44" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe>
<!-- koniec: RAMKA Z ZEWNĘTRZNĄ ZAWARTOŚCIĄ --> 

</div>
<!--koniec KONTENER -->

<!-- koniec: HTML -->

Jak widać poniżej proporcje osadzonego filmu z Youtube są prawidłowe ale klip rozciągnięty jest na całą szerokość okna co nie przeszkadza w przypadku gdy cała treść strony jest osadzona w kontenerze mniejszym niż szerokość okna, w naszym przypadku nie wygląda to dość dobrze więc do dzieła.

Spróbujmy temu zaradzić dodając trochę kodu CSS tak aby nasza osadzona treść była bardziej responsywna. Przejdźmy do założeń: maksymalna szerokość ramki na większych ekranach to 800px i w tym wypadku ramka ma być wyjustowana centralnie – poziomo, na mniejszych ekranach ramka ma zajmować całą szerokość okna minus mały odstęp po bokach pozwalający na przewijanie strony w trybie touch (mobile). A oto nasz responsywny kod Css który dopisujemy do styli kontenera <div>:

max-width:800px; margin:auto; width: calc( 100% – 2rem);

Poniżej zaktualizowany kod:

<!-- HTML --> 

<!--KONTENER -->
<div style=" position:relative; padding-bottom:56.25%; max-width:800px;  margin:auto; width:calc( 100% - 2rem);">

<!-- RAMKA Z ZEWNĘTRZNĄ ZAWARTOŚCIĄ -->
<iframe style= "width:100%; height:100%; position:absolute; left:0px; top:0px;" width="100%" height="100%" src="https://www.youtube.com/embed/Re2BclGmw44" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe>
<!-- koniec: RAMKA Z ZEWNĘTRZNĄ ZAWARTOŚCIĄ --> 

</div>
<!--koniec: KONTENER -->

<!-- koniec: HTML -->

Jak widzimy poniżej szerokość jest ok, klip wycentrowany ale ewidentnie proporcje nam się „posypały” ponieważ wartość reguły padding-bottom czyli w tym przypadku 56.25% została wyliczona na podstawie wysokości naszego kontenera który ma wartość 100% wysokości osadzonej w nim ramki a nie według proporcji do „wymuszonej” szerokości naszego kontenera o wartości 800px .

Jedynym rozwiązaniem które znaleźliśmy to umieszczenie całości w jeszcze jednym kontenerze <div> który ma przypisaną szerokość na „sztywno” i dopiero wtedy wszystko działa jak należy. Dodatkowo można bez problemu osadzić całość na pełnej szerokości, wystarczy w pierwszym <div> (DODATKOWY KONTENER) zmienić wartość reguły max-width z 800px na 100% Poniżej prawidłowo działający kod dla I metody:

<!-- HTML --> 

<!--DODATKOWY KONTENER -->
<div style="  max-width:800px;  margin:auto; width:calc( 100% - 1rem); ">

<!--KONTENER -->
<div style=" position:relative; padding-bottom:56.25%;  width:100%; height:100%; ">

<!-- RAMKA Z ZEWNĘTRZNĄ ZAWARTOŚCIĄ -->
<iframe style="width:100%; height:100%; position:absolute; left:0px; top:0px;" width="100%" height="100%" src="https://www.youtube.com/embed/Re2BclGmw44" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe>
<!-- koniec: RAMKA Z ZEWNĘTRZNĄ ZAWARTOŚCIĄ --> 

</div>
<!--koniec: KONTENER -->

</div>
<!--koniec:  DODATKOWY KONTENER -->

<!-- koniec: HTML -->

Metoda II (nowa) – aspect ratio

W metodzie tej nie kombinujemy już z tabelkami i procentami przypisanymi do stosunku proporcji , wystarczy że w właściwości reguły „aspect-ratio” wprowadzimy odpowiednią wartość stosunku proporcji np: „16/9” odpowiadającej filmom nagranym w formacie full HD, 2K i 4K.

Żeby nie przedłużać od razu publikujemy działający kod :

<!-- HTML --> 
<!--KONTENER -->
<div style="margin:auto; max-width:800px; width:calc(100% - 2rem); height:auto; aspect-ratio: 16/9;">

<!-- RAMKA Z ZEWNĘTRZNĄ ZAWARTOŚCIĄ -->
<iframe style="margin:auto; " src="https://www.youtube.com/embed/Re2BclGmw44" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" width="100%" height="100%"></iframe>
<!-- RAMKA Z ZEWNĘTRZNĄ ZAWARTOŚCIĄ -->

</div>
<!--koniec KONTENER -->
<!-- koniec: HTML -->

Jeżeli nie znasz się na programowaniu a chcesz osadzić film z YT na własnym blogu to najprościej będzie „odpalić” zwykły notatnik, skopiować powyższy kod, zlokalizować ciąg: „src=”https://www.youtube.com/embed/Re2BclGmw44” i podmienić go na własny, następnie (w zależności od bloga) dodać kod do posta/strony za pomocą opcji „własny HTML” lub tożsamej. Kod działa również z innymi treściami osadzanymi za pomocą znacznika <iframe>, może to być wirtualny spacer lub treść od innego dostawcy.

Ciekawostką odnośnie reguły „aspect-ratio” jest możliwość użycia jej do formatowania wyświetlanych zdjęć/grafik na stronie WWW. Reguła ta została wykorzystana przez nas na tej stronie np. w zakładce „PORTFOLIO” i odpowiada za zmianę wysokości wyświetlanych zdjęć/grafik w zależności od rozmiaru ekranu.

Polub nas na fejsie i bądź na bieżąco.