Czego dowiesz się z poradnika:
- dlaczego domyślnie filmy z YouTube zamieszczone na stronie nie dostosowują się do szerokości ekranu;
- jak wstawić film na pełną szerokość ekranu – telefonu komórkowego lub monitora;
- jak narzucić maksymalną szerokość, której film nie będzie przekraczać;
- jak wykonać te czynności, kopiując gotowy kod HTML/CSS bez jego znajomości.
Co zazwyczaj się dzieje, gdy zamieścimy na stronie film?
Pamiętaj: Możesz zamieścić film w klasyczny sposób, wklejając kod udostępniony przez YouTube lub inny portal. Tutaj znajdziesz instrukcję dla sklepu 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 – 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 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). Problematyczne wyświetlanie filmu nie jest efektem oprogramowania twojej strony czy sklepu internetowego.
Jak wyświetlić responsywny film, nie znając HTML i CSS?
Uwaga: Ze względów bezpieczeństwa w sklepach Shoper domyślnie własny kod HTML jest czyszczony. Przejdź do zakładki Ustawienia > Zaawansowane > Bezpieczeństwo i zaznacz opcję Wyłącz czyszczenie kodu HTML i zapisz zmiany:
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ć.
1. W stylu swojej strony wklej poniższy kod. Odpowiada on za zachowanie kontenerów, które później zostaną użyte.
W sklepie Shoper kod wklej w zakładce Wygląd i treści > Wygląd sklepu > Obecny szablon graficzny > Własny kod CSS i zapisz zmiany.
/* 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%;
}
2. Następnie przejdź do filmu na YouTube, który chcesz zamieścić na stronie. Tuż pod nim znajdziesz ikonę 
. Po kliknięciu pojawi się okno. Wybierasz w nim ikonę umieszczenia poprzez dodanie kodu:
Pojawi nam się okienko z opcjami (wystarczy zostawić domyślne) i kodem do skopiowania.
3. W kolejnym kroku należy przejść do strony, na której chcesz zamieścić nasz film. Wyłącz edytor wizualny swojego oprogramowania, aby przejść do kodu HTML. W sklepie Shoper odpowiada za to przycisk:
Wklejasz kod skopiowany z YouTube w miejscu, gdzie ma się wyświetlać film – na przykład na początku.
4. Pora skopiować zaznaczony kolorem kod pokazany poniżej. Na szaro zaznaczyliśmy z kolei przykładowego filmu z YouTube. Ramkę z filmem musi otaczać pokazany przez nas kolorem kontener w HTML.
<div class="video-container"><iframe width="560" height="315" src="https://www.youtube.com/embed/-mTDQPzh_B4" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
Zapisz zmiany i gotowe! Każdy film, który umieścisz w ramach takiego kodu będzie od tej pory skalował się na różnych ekranach do ich pełnej szerokości.
Pamiętaj: taki film możesz zamieścić w module, który będzie się wyświetlał na przykład pod każdą kartą produktu (Wygląd i treści > Wygląd sklepu > Obecny szablon graficzny > Moduły > Shoper Visual Editor, a następnie „Dodaj moduł do strony”), na dowolnej stronie informacyjnej (np. opowiadającej o firmie), wpisie blogowym, jako element strony głównej opowiadający o marce, uzupełnienie opisu konkretnego produktu.
Wariant 2: film nieprzekraczający wskazanej 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.
1. We własnym kodzie CSS dodaj poniższy kod nad tym, który podaliśmy na samym początku.
.video-wrap {
width: 100%;
max-width: 800px;
margin: 0 auto;
}
W przykładzie powyżej maksymalna szerokość, której kontener z filmem nie przekroczy to 800 pikseli. Możesz ją oczywiście dowolnie zmienić. Wystarczy, że wpiszesz inną wartość. Gdy tylko szerokość ekranu spadnie poniżej tej liczby, film będzie wyświetlał się na pełną szerokość.
2. Kroki 2 i 3 wykonujesz bez zmian. Kopiujesz kod z YouTube i wklejasz w pożądanym miejscu.
3. Tym razem kod filmu muszą otaczać dwa kontenery. Przekopiuj zaznaczony kolorem fragment kodu. Ma on otaczać film z YouTube.
<div class=”video-wrap”><div class=”video-container”>
<iframe src="https://www.youtube.com/embed/-mTDQPzh_B4" width="560" height="315" frameborder="0" allowfullscreen="allowfullscreen"></iframe></div></div>
Gotowe! Teraz film nie tylko jest responsywny, ale posiada obostrzenie, aby nie przekraczał wyznaczonej szerokości.