Jeśli śledzisz naszego bloga, to na pewno już wiesz, w jaki sposób ustawić obok siebie elementy na stronie sklepu, by zachowywały się responsywnie. Teraz czas na podobną lekcję z klipami wideo.
W tym artykule pisaliśmy niedawno, jak w opisach stron, kategorii, produktów czy modułów ustawić niektóre elementy obok siebie i żeby wyglądały one dobrze. Podpowiadaliśmy, że „dzięki zastosowaniu podziału z użyciem siatki mamy pewność, że wprowadzone elementy będą prawidłowo zachowywać się na każdym urządzeniu”.
Ale jak do podobnego zachowania zmusić np. ramkę z filmem, zaciąganym z YouTube’a? Dobrze wiemy, że wideo dodane poprzez „iframe” ma z góry narzucone wymiary dla wysokości i szerokości, przez co nie będzie się automatycznie skalować na ekranach o różnych wymiarach. A to szczególnie istotne w kontekście przeglądania treści, w tym wypadku strony sklepu internetowego, na różnego rodzaju urządzeniach mobilnych.
Ponieważ sam YouTube nie ułatwia sprawy i nie daje nam responsywnego kodu do osadzenia na stronie, musimy w tym przypadku poradzić sobie sami. Ale! Nie stoimy wcale na straconej pozycji – z pomocą przyjdzie bowiem CSS.
Responsywne klipy wideo na stronie sklepu – zobacz, jak to zrobić
W pierwszym kroku, musisz stworzyć w CSS-ie kontener z odpowiednią klasą, w którym osadzisz responsywne wideo:
Następnie dodaj zapis do własnego stylu CSS:
Dzięki tak stworzonemu kontenerowi każde wideo dodane poprzez iframe będzie się automatycznie skalowało w zależności od wielkości ekranu, na którym jest przeglądane.
Responsywne klipy wideo na stronie sklepu – zobacz, jak to może wyglądać
Przykład wykorzystania takiego rozwiązania można już zobaczyć w sklepach pracujących na naszym oprogramowaniu. Na przykład pod adresem Sklep.Kawoserwis.pl.
W tym samym sklepie warto jeszcze podejrzeć, jak ładnie mogą się wyświetlać – przy korzystaniu z iframe’a – mapy Google. O innych dodatkach, które możesz wprowadzić w swoim sklepie przeczytasz natomiast w naszych poradnikach:
☞ Dodatki do twojego sklepu: Sprzedaż B2B
☞ Dodatki do twojego sklepu: rozbudowane opinie klientów
☞ Dodatki do twojego sklepu: długie/krótkie opisy w kategoriach produktów
☞ Dodatki do twojego sklepu: warianty produktów z miniaturą
