Twórz responsywne wideo lub obrazy i skaluj się na dowolnym urządzeniu dzięki komponentowi embeds w najnowszej wersji Bootstrapa 5. Kliknij tutaj aby zobaczyć przykłady oraz dowiedzieć się jak z nich skorzystać.
Na naszych stronach możemy umieszczać video z Youtube czy Vimeo. Ale możemy także umieszczać elementy innych stron lub jakieś widżety z pomocą iframe.
Bootstrap ma przygotowane kilka klas pozwalających na umieszczanie na stronach responsywnych iframe i w przypadku filmów, również pilnowania ich proporcji.
Zaczniemy od stworzenia diva z klasą .embed-responsive a w nim umieścimy iframe z klasą .embed-responsive-item i to tyle.
Aby umieścić na przykład film z YouTube z odpowiednimi proporcjami obrazu, możemy do diva z klasą .embed-responsive dodać następujące klasy:
.embed-responsive-21by9– dla obrazu o proporcjach 21:9.embed-responsive-16by9– dla obrazu o proporcjach 16:9 ( standard dla YT ).embed-responsive-4by3– dla obrazu o proporcjach 4:3.embed-responsive-1by1– dla obrazu o proporcjach 1:1
Przykład
21:9
16:9
4:3
1:1
Kod
<div class="embed-responsive embed-responsive-21by9">
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/fQHEBL9Izn0?rel=0" allowfullscreen></iframe>
</div>
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/fQHEBL9Izn0?rel=0" allowfullscreen></iframe>
</div>
<div class="embed-responsive embed-responsive-4by3">
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/fQHEBL9Izn0?rel=0" allowfullscreen></iframe>
</div>
<div class="embed-responsive embed-responsive-1by1">
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/fQHEBL9Izn0?rel=0" allowfullscreen></iframe>
</div>
(12 głosów, średnia: 4,67 na 5)
Loading...