Jak dodać responsywne wideo YouTube do wpisu WordPress?

Chcesz dodać responsywne wideo z Youtube do wpisu WordPress? Możesz to zrobić w bardzo prosty sposób. Jak? O tym dowiesz się za chwilę.

W listopadzie 2014 r. Google ogłosiła, że podnosi ranking stron przyjaznych dla urządzeń mobilnych w wynikach wyszukiwania na urządzeniach mobilnych. W wyniku przejścia na Internet przyjazny dla urządzeń mobilnych, strony, które nie są dostosowane do urządzeń mobilnych, otrzymały niższą pozycję niż do tej pory. Dlatego popularnym trendem w 2014/15 r. był responsive web design (RWD) czyli technika projektowania strony internetowej, tak aby jej wygląd i układ dostosowywał się automatycznie do rozmiaru okna przeglądarki, na której jest wyświetlany.
Obecnie w Internecie pozostaje sporo stron, które nie są responsywne. Większość z nich to, stare witryny o których zapomnieli ich twórcy. Jeśli chodzi o nowe strony, one muszą być responsywne. Przynajmniej motywy WordPress sprzedawane na stronie TemplateMonster już od początku 2015 r. są responsywne.
Aby sprowadzić, czy Twoja strona jest responsywna, warto skorzystać z serwisu od Google (rys. 1).

Jeśli strona jest przyjazna dla urządzeń mobilnych, musisz zadbać o jej zawartość, aby wszystkie elementy w tym grafiki, wideo też były responsywne. Warto, więc zwrócić uwagę na rozmiar obrazów i video używanych na Twojej stronie. Gdy obrazy zazwyczaj automatycznie dostosowują się do rozmiarów ekranów smartfonów, to w przypadku video nie do końca tak jest. Dlatego postanowiłem pokazać Ci jak zaradzić sobie z dodaniem video YouTube na stronę WordPress, aby było ono responsywne.

1. Dodanie wideo YouTube za pomocą narzędzia WordPress – Gutenberg

Od wersji 5.0 WordPress wprowadził nowy wizualny kreator Gutenberg, który zastąpił poprzedni edytora czyli TinyMCE. Twórcy Gutenbergu zapowiadają, że nowy kreator pozwala szybko dodać nowe video. Zobaczmy jak to działa.
Przechodzimy do sekcji Wpisy – Dodaj nowy aby stworzyć nowy artykuł. Dalej klikamy w przycisk Dodaj blok (+) i wybieramy Osadzone treści – YouTube (rys. 2).

Dalej warto skopiować link do video YouTube i dodać go w odpowiednie pole (rys. 3):

Po kliknięciu przycisku Osądź, video pojawi się na stronie (rys. 4):

Jak widać, nie ma tu nic trudnego. Jednak warto zaznaczyć, że dodanie video w poprzednim edytorze (zaczynając od wersji WordPress 4.7) było zdecydowanie prostsze. Wystarczyło dodać link do video YouTube, a edytor automatycznie przetworzył link w video. Teraz niestety taki sposób nie działa i jak widziałaś wyżej, trzeba wykonać kilka dodatkowych kroków.
Warto zaznaczyć, że nie zawsze video może być dodane do wpisu za pomocą bloku Gutenberga. Czasami może pojawiać się taki komunikat(rys. 5):

Przeczytałem kilka tematów na stronie github.com o tym problemowi. Może on wynikać:

• Ze względu na wybraną przeglądarkę. Powyższy rysunek zrobiłem na komuterze w pracy, gdzie u mnie nie działa Gutenberg w przeglądarce Firefox. Natomiast kreator działa na Firefox w moim domu. Co ciekawe, że wszędzie stosuje tą samą wersję i jednakowe rozszerzenia.
• Poprzez blokowanie wideo przez autorów aby uniemożliwić osadzenie materiału na zewnętrznych stronach.
• Przez używanie różnych rozszerzeń do blokowania reklam w Twojej przeglądarce.

Jeśli znasz inne przyczyny, które spowodowały wyświetlenie komunikatu, proszę podaj je w komentarzu do tego wpisu.

2. Dodanie video YouTube do wpisu WordPress za pomocą kodu HTML

Istnieje uniwersalne rozwiązanie dla dodania video YouTube do wpisu WordPress. Jest to stary dobry kod HTML. Aby go dostać warto przejść na stronę video w YouTube. Dalej warto kliknąć na przycisk Udostępnij i wybrać opcję Umieść (rys. 6).

Dalej pojawi się sekcja z kodem, który można skopiować i wstawić dowybranego miejsca we wpisie lub stronie WordPress (rys. 7).

Użycie kodu HTML pozwala usunąć problem z Gutenbergiem. Przy dodaniu kodu z rysunku 7 do swojego bloga w trybie edytora kodu, video pojawia się we wpisie (rys. 8).

Dodanie video na stronę za pomocą kodu ma dużą zaletę mianowicie, możliwość przetworzenia video tak, aby było one responsywne.

Responsywne wideo – kod CSS i funkcja

Dlatego warto wykonać następne kroki:
1. Do każdego kodu warto dodać blok DIV z klasą CSS. Tak, na przykład, musi wyglądać kod powyższego video:

2. Trzeba dodać specjalne style do pliku CSS dla klasy youtube:
.youtube {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
}

.youtube iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
Powyższy kod można dodać za pomocą zakładki – edytor motywu, który znajduje się w sekcji Wygląd (rys. 9), należy wybrać i edytowć plik Arkusze stylów (style.css)

Jeśli nie chcesz, aby video odtwarzało się na całą szerokość ekranu przeglądarki, warto usunąć znaczenie width i height: 100%. Można także ustawić, aby video odtwarzało się na pełną szerokość tylko na ekranach mniejszych, np. niż 768 pikseli:
@media screen and (max-width: 767px) {
.youtube iframe {
width: 100%;
height: 100%;
}
}
Powyższy kod warto wstawić również do arkuszu stylów.

Jeśli planujesz jednak używać blok Gutenbergu do wstawienia video na stronę, można automatyzować dodanie DIVów do kodu video. Dlatego warto zmodyfikować plik funkcji motywu używanego domyślnie, dodając ten kod (rys. 10):

add_filter('the_content', 'filter_iframe');
function filter_iframe($html){
$html = preg_replace('/<iframe (.*?)>(.*?)<\/iframe\>/is', '<div class="youtube"><iframe $1>$2</iframe></div>', $html);
return $html;
}


Po zapisaniu wszystkich zmian, możesz dodać video YouTube za pomocą kodu oraz bloków Gutenberga. Wideo będzie od tej pory responsywne.

UWAGA! Zanim zaczniesz dodawać kod do pliku motywów, pamiętaj, aby wcześniej wykonać kopię zapasową strony. Aby w przypadku jakiegoś błędu (np. nie zamknięcie klamry itp., spowoduje to błąd na stronie), móc szybko przywrócić stan poprzedni witryny.
Warto również stworzyć wcześniej motyw potomny (child theme) i tam osadzić dodatkowy kod CSS czy htlm, php. Dzięki temu podczas aktualizacji motywu nie stracisz wprowadzonego kodu.

Podsumowanie

Aby strona internetową uzyskała dobrą pozycję w wynikach wyszukiwania Google, musi spełnić szereg kryteriów. Jeden z nich to responsywność. Jeśli masz responsywną stronę musisz dbać o responsywności zawartości, w tym video. W dzisiejszym wpisie pokazałem jak dodać video YouTube do wpisu za pomocą Gutenbergu oraz dodatkową metodą czyli osadzenie kodu ze strony YouTube. Opisałem również kroki, które warto wykonać aby video było responsywne. Dzięki tym krokom zrobisz dobry content na stronie, który przypadnie do gustu przeglądarce webowej.
P.S. Jeśli masz dodatkowe pytania lub uwagi, prosimy pozostawiać komentarzy.