Dodawanie filmików z YouTube w opisie produktu

Data publikacji: 21 marca 2016 Ostatnia aktualizacja: 25 listopada 2024

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

Jak dodać filmik z YouTube do opisu produktu w sklepie Shoper?

Zaloguj się do Panelu administracyjnego sklepu.
Przejdź do: Obsługa sklepu (A) > Produkty (B) i wejdź w edycję wybranego produktu (C), do którego chcesz dodać film z YouTube.
Panel administracyjny sklepu > Obsługa sklepu > Produkty > Edytuj konkretny produkt
Rys 1. Kliknij nazwę lub użyj menu: Akcji, by edytować dany produkt w sklepie Shoper.
Panel administracyjny sklepu > Obsługa sklepu > Produkty > Edytuj konkretny produkt
Rys 1. Kliknij nazwę lub użyj menu: Akcji, by edytować dany produkt w sklepie Shoper.
Wybierz zakładkę: Opis (A) i kliknij: wyłącz edytor (B) na pasku narzędzi.
Edycja produktu > Długi opis > Wyłącz edytor
Rys 2. Sprawdź, w jaki sposób wyłączyć edytor tekstu na pasku narzędzi.
Edycja produktu > Długi opis > Wyłącz edytor
Rys 2. Sprawdź, w jaki sposób wyłączyć edytor tekstu na pasku narzędzi.
Skopiuj: kod HTML ze strony YouTube.
Wideo instrukcja kopiowania kodu HTML do udostępnienia filmu z YouTube
Rys 3. Zobacz, gdzie znajdziesz niezbędny kod HTML do wybranego filmu z YouTube.
Wideo instrukcja kopiowania kodu HTML do udostępnienia filmu z YouTube
Rys 3. Zobacz, gdzie znajdziesz niezbędny kod HTML do wybranego filmu z YouTube.
Wklej skopiowany kod w opisie produktu (A) i kliknij przycisk: ZAPISZ (B).
Edycja produktu > Długi opis > kod HTML filmu z YT
Rys 4. Kod HTML z filmem możesz wkleić po wyłączeniu edytora w opisie produktu.
Edycja produktu > Długi opis > kod HTML filmu z YT
Rys 4. Kod HTML z filmem możesz wkleić po wyłączeniu edytora w opisie produktu.

WAŻNE! Aby unikać wycinania kodów HTML należy zaznaczyć opcję: Wyłącz czyszczenie kodu HTML (D) w zakładce: Ustawienia (A) > Zaawansowane (B) > Bezpieczeństwo (C).

Panel administracyjny sklepu > Ustawienia > Zaawansowane > Bezpieczeństwo > Czyszczenie kodu HTML
Rys 5. Sprawdź, gdzie wyłączyć funkcję czyszczenia kodu HTML w Panelu administracyjnym sklepu Shoper.
Panel administracyjny sklepu > Ustawienia > Zaawansowane > Bezpieczeństwo > Czyszczenie kodu HTML
Rys 5. Sprawdź, gdzie wyłączyć funkcję czyszczenia kodu HTML w Panelu administracyjnym sklepu Shoper.

Rozwijaj swój sklep internetowy dzięki elastycznym rozwiązaniom kredytowym. Dowiedz się, jak możesz uzyskać finansowanie na rozwój swojego biznesu.

Responsywne wideo z YouTube w opisie 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ć.

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

Z natury ramki mają zadeklarowane wymiary i nie są responsywne (nie skalują się płynnie na wyświetlaczach różnej wielkości).

Nie obejdzie się bez drobnej ingerencji w kod HTML i CSS (odpowiadający za wygląd strony).

Warto zapamiętać!
W powyższym artykule zostało wyjaśnione:
  • Jak wstawić film z YouTube w treści opisu wybranego produktu?
  • Co zrobić, by wideo z YouTube było responsywne na stronie sklepu?
Czy ten artykuł był pomocny?
Tak
Nie
Dziękujemy za odpowiedź!
Udostępnij artykuł:

Przetestuj sklep internetowy
przez 14 dni za darmo

Korzystaj ze wszystkich funkcji oprogramowania za darmo i bez zobowiązań.

Testuj wszystkie funkcje przez 14 dni bez zobowiązań. Zakładając sklep poprzez podanie
adresu e-mail akceptujesz nasz Regulamin i Politykę Prywatności