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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <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> |
Loading...