Wideo dobre na każdym ekranie – responsywne filmy

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ć.

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.