Umieszczanie YouTube / Embeds

895 0

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

Przydało się? Oceń proszę jak bardzo: SłaboJako takoNie ma źleDobrzeRewelacja! (3 głosów, średnia: 5,00 na 5)
Loading...

Chcesz coś napisać?

Podziel się swoją opinią bądź dodaj coś od siebie.

*

*