Bootstrap tutorial logo

Responsywny iframe oraz embed

autor: Robert

30 lipca 2014

Niejednokrotnie zamieszczamy na naszych stronach filmy np. z YouTube. Wklejenie kodu skopiowanego prosto ze strony powoduje, że film wyświetla się w ramce o sztywno określonej wielkości, co oczywiście jest efektem niepożądanym na responsywnych stronach www. Oczywiście można zastosować sztuczki w arkuszu stylów i wymusić na ramce responsywność, ale po co, skoro twórcy Bootstrapa zrobili to za Was:)

Podstawowy przykład

Tworzymy div z klasami .embed-responsive oraz .embed-responsive-16by9 gdy chcemy by film wyświetlał się w proporcjach 16:9 lub .embed-responsive-4by3 gdy chcemy by film wyświetlał się w proporcjach 4:3. Wewnątrz tego diva umieszczamy naszą ramkę z klasą .embed-responsive-item i już:)


Post się przydał? Oceń go proszę.
1 Gwiazdka2 Gwiazdki3 Gwiazdki4 Gwiazdki5 Gwiazdek (6 głosów, średnia: 4,67 na 5)
Loading...

Komentarze: Bądź pierwszy!