Jak wstawić responsywne wideo z YouTube na stronę internetową?

Jak zapewne wiesz wstawienie kodu embed z YouTube na stronę internetową nie sprawi, że wideo będzie responsywne, czyli poprawnie wyświetlane na wszystkich urządzeniach.

Jest jednak na to prosty sposób. Wystarczy dodać odpowiednie style CSS w formie inline lub do pliku CSS. W systemie WordPress można je też dodać w panelu dostosowania strony Wygląd -> Dostosuj.

Poniżej kod jaki należy dodać do css (jeżeli podajemy ten kod jako styl inline w treści dokumentu html to dodajemy tagi <style></style>)

<style>
.video-youtube { 
position: relative; 
padding-bottom: 56.25%; 
height: 0; 
overflow: hidden; 
max-width: 100%;
} 
.video-youtube iframe, .video-youtube object, .video-youtube embed { 
position: absolute; 
top: 0; 
left: 0; 
width: 100%; 
height: 100%;
}
</style>

Natomiast film wideo w formie iframe musi znaleźć się w odpowiednim bloku <div> z nowo utworzoną klasą „video-youtube”

<div class="video-youtube">
<iframe src='https://www.youtube.com/embed/QILiHiTD3uc' frameborder='0' allowfullscreen></iframe>
</div>

Leave a Comment

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *