Umieszczanie YouTube / Embeds

8 275 0

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

</p>

<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>
<p>

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

Chcesz coś napisać?

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

*

*