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ę.
(7 głosów, średnia: 4,71 na 5)
Loading...Komentarze: Bądź pierwszy!
- Bootstrap 3 (47)
- Bootstrap 4 (3)
- Breadcrumbs (1)
- Buttony (5)
- CSS (15)
- Etykiety (2)
- Formularze (4)
- Ikony (1)
- JavaScript (5)
- Karuzela / Slider (1)
- Klasy pomocnicze (1)
- Komponenty (20)
- Lista rozwijana / dropdown (2)
- Listy (1)
- Media (1)
- Menu (2)
- Modal (1)
- Obrazy (2)
- Panele (2)
- Paski postępu (1)
- Powiadomienia (1)
- Rusztowanie szablonu (3)
- Studnia (1)
- Tabele (1)
- Tworzenie strony www (2)
- Typografia (2)
- Uncategorized (1)
- Wprowadzenie (9)
- Zakładki (1)
