Wideo dobre na każdym ekranie – responsywne filmy

Responsywny film w sklepie internetowym to wideo, które automatycznie dopasowuje swój rozmiar do ekranu urządzenia, na którym jest wyświetlane – od smartfona po monitor UltraWide. Aby osadzić taki film, nie wystarczy zwykłe wklejenie kodu iframe z YouTube, ponieważ standardowe ramki mają sztywne wymiary (np. 560×315 px), co powoduje ich „wychodzenie” poza krawędzie ekranu na telefonach. Rozwiązaniem jest zastosowanie kontenera CSS, który nadaje filmowi elastyczność i zachowuje proporcje 16:9. Dzięki temu poprawiasz UX (doświadczenia użytkownika), wydłużasz czas przebywania na stronie i profesjonalnie prezentujesz asortyment bez konieczności znajomości zaawansowanego programowania.

Czym jest responsywne wideo w sklepie internetowym i dlaczego go potrzebujesz?

Responsywne wideo to materiał filmowy, który płynnie dostosowuje swój rozmiar (szerokość i wysokość) do wymiarów okna przeglądarki lub ekranu urządzenia, na którym jest wyświetlany. W przeciwieństwie do tradycyjnie osadzonych filmów, które mają „sztywne” wymiary, responsywne video zachowuje swoje proporcje (najczęściej 16:9), nie wychodzi poza krawędzie ekranu smartfona i nie pozostawia pustych czarnych pasów na dużych monitorach. W dzisiejszym handlu online, gdzie detale decydują o zakupie, poprawnie wyświetlające się multimedia są fundamentem profesjonalnego wizerunku marki.

Dlaczego Twój sklep bezwzględnie potrzebuje tego rozwiązania?

• Zgodność z Mobile-First Indexing: Google ocenia Twoją stronę głównie na podstawie jej wersji mobilnej; błędy w wyświetlaniu filmów mogą obniżyć Twoją pozycję w wynikach wyszukiwania.
• Wydłużenie czasu sesji: Atrakcyjne, dobrze osadzone responsywne filmy angażują użytkownika, sprawiając, że spędza on więcej czasu na karcie produktu.
• Zmniejszenie współczynnika odrzuceń: Jeśli klient po otwarciu strony na telefonie zobaczy niefunkcjonalny, „rozjechany” odtwarzacz, prawdopodobnie natychmiast opuści Twój sklep.
• Wzrost zaufania i konwersji: Profesjonalna prezentacja wideo pozwala klientowi lepiej poznać produkt, co bezpośrednio przekłada się na mniejszą liczbę zwrotów i wyższą sprzedaż.

Wdrożenie tej technologii nie wymaga skomplikowanych narzędzi, a korzyści płynące z optymalizacji UX (doświadczeń użytkownika) odczujesz niemal natychmiast w statystykach swojego sklepu.

Co się dzieje, gdy umieścimy na stronie film?

Możesz zamieścić film w klasyczny sposób, wklejając kod udostępniony przez YouTube lub inny portal.

Jak dodać film z YouTube w opisie produktu? W tym artykule znajdziesz instrukcje dodawania wideo z YouTube w opisach produktów w sklepie Shoper. Jednak to najprostsze rozwiązanie ma swoje wady, o których przeczytasz poniżej.

Czasem może pojawić się potrzeba zamieszczenia na stronie filmu, np. na podstronie informacyjnej, blogu czy jako element opisu produktu.

Gdy chcesz zagnieździć nagranie z zewnętrznego serwisu (najczęściej z YouTube), z reguły napotkasz na poniższe częste problemy:

• okienko z filmem ma z góry narzuconą wielkość,
• na komórkach film nie mieści się na ekranie,
• na większych ekranach niejednokrotnie chcielibyśmy wyświetlić film na pełną szerokość monitora, ale nie wiemy, jak to zrobić.

Darmowe szablony Zacznij z gotowym wyglądem sklepu, który zachwyca

Wybierz darmowy szablon i uruchom sklep bez projektowania od zera. Sprawdź, jak Twój sklep może wyglądać już dziś.

Zobacz szablony

Przede wszystkim musisz wiedzieć, że problem wynika z natury ramek – tagów iframe w języku HTML, który tworzy strukturę naszych stron.

Jak wstawić responsywny film – nie znając HTML i CSS?

Ze względów bezpieczeństwa w sklepach Shoper domyślnie własny kod HTML jest czyszczony. W Panelu administracyjnym sklepu przejdź do zakładki: Ustawienia > Zaawansowane > Bezpieczeństwo, zaznacz opcję: Wyłącz czyszczenie kodu HTML i następnie kliknij przycisk: Zapisz.

Nie obejdzie się bez drobnej ingerencji w kod HTML i CSS (odpowiadający za wygląd strony). Na szczęście nie musisz go rozumieć, ale musisz wiedzieć, gdzie i co należy wkleić.

/* responsywne wideo */
.video-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px; height: 0; overflow: hidden;
}
.video-container iframe,
.video-container object,
.video-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

Następnie przejdź do filmu na YouTube, który chcesz zamieścić na stronie. Tuż pod nim znajdziesz ikonę: Udostępnij (A). Po jej kliknięciu pojawi się okno, w którym należy wybrać opcję Umieść (B).

Pojawi się okienko z wygenerowanym kodem do osadzania filmu z Youtube.

Nie kopiuj jeszcze powyższego kodu, aczkolwiek za moment będzie Ci on potrzebny.

W kolejnym kroku należy przejść do strony, na której chcesz zamieścić film. Wyłącz edytor wizualny, aby przejść do kodu HTML. W sklepie Shoper odpowiada za to przycisk: Wyłącz edytor.

<div class="video-container">Tutaj wklej kod skopiowany z Youtube</div>

Jak wstawić film nieprzekraczający maksymalnej szerokości?

Jeśli uznasz, że widok na telefonie czy tablecie jest dobry, ale na ekranie komputera jest za szeroki – przeczytaj, jak narzucić maksymalną szerokość. Do tego będzie nam potrzebny jeszcze jeden kontener.

.video-wrap {
width: 100%;
max-width: 800px;
margin: 0 auto;
}

Tym razem kod filmu muszą otaczać dwa kontenery.

Skopiuj

<div class=”video-wrap”><div class=”video-container”>Tutaj wklej kod skopiowany z Youtube</div></div>

Gotowe! Teraz film nie tylko jest responsywny, ale posiada warunek, aby nie przekraczał wyznaczonej szerokości.

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.sawoserwis.pl.

FAQ

Czy ten artykuł był pomocny?

Tak

Nie

Wyślij opinię Anuluj

Dziękujemy za odpowiedź!

Udostępnij artykuł:

Darmowe szablony Zacznij z gotowym wyglądem sklepu, który zachwyca

Wybierz darmowy szablon i uruchom sklep bez projektowania od zera. Sprawdź, jak Twój sklep może wyglądać już dziś.

Zobacz szablony

Przeczytaj także:

• Umieszczenie pliku do pobrania w sklepie

  Jak dodać pliki na serwer sklepu, a następnie w jaki sposób wstawić jeden z nich do pobrania na wybranych podstronach sklepu internetowego.

• Zarządzanie modułem: Nowości

  Moduł: Nowości wyświetla w wybranym miejscu nowe produkty - celem zwiększenia atrakcyjności oferty sklepu w oczach kupujących.

• Jak dodać plik do pobrania do produktu, strony informacyjnej lub opisu kategorii?

  Zapoznaj się ze szczegółową instrukcją dodawania bezpośredniego linku (odnośnika) do pliku PDF, który znajduje się w opisie danego produktu.

• Jak do generowanych faktur wstawić logo swojej firmy?

  Z tej instrukcji dowiesz się, jak umieścić logo swojej firmy na dokumentach podczas generowania faktur w systemie Shoper Faktury i Magazyn.