Stworzyłeś stronę WordPress i zastanawiasz się jak umieścić na niej wideo? Chcesz wiedzieć jak w WordPress wstawić iframe? Czy do jest potrzebna wtyczka do filmów? W tym poradniku odpowiemy na te pytania.
Wideo opanowało internet. Ten rodzaj komunikacji wykorzystywany jest już nie tylko w mediach społecznościowych (Facebook Live, stories na Instagramie, Messegerze), ale również w newsletterach i mailingach. Chociaż korporacyjne filmy biznesowe pokazujące fabryki z lotu ptaka odchodzą w niepamięć, to krótkie wizytówki wideo na stronie firmowej np. prezentujące zespół to świetna promocja, która może przyczynić się do zwiększenia konwersji.
W naszym poradniku nie będziemy korzystać z żadnych dodatkowych wtyczek do filmów ponieważ w większości przypadków są one zbędne. Wykorzystamy domyślne możliwości jakie daje nam WordPressa i serwisy wideo. Pierwszą z opcji jaką opiszemy jest jest osadzenie filmu umieszczonego pierwotnie w serwisie typu Vimeo czy YouTube. Drugą, wrzucenie filmu do biblioteki mediów i skorzystanie w wbudowanego w WordPressa playera.
Osadzanie filmów z innych mediów (oEmbed)
Przesyłając wideo na serwis typu YouTube, możesz potem za pomocą linku osadzić go na stronie swojego WordPressa. Dzięki tej metodzie, filmy bez problemu będą odtwarzane w dowolnej przeglądarce lub urządzeniu. W ten łatwy sposób można w WordPressie osadzać wideo z serwisów:
- YouTube
- Vimeo
- Flickr
- Hulu
- Animoto
- DailyMotion
- Educreations
- SproutVideo
- The Internet Archive
- TED Talks
- Twitch.tv
- Ustream.tv
- Viddler
- Vine
- Wistia
W Gutenbergu mamy specjalny blok Video Press, który służy osadzaniu filmów wideo:
W klasycznym edytorze jest to równie banalne, bo wystarczy wkleić link w okno samego edytora:
Jeżeli chcemy mieć pełny wpływ na szerokość okna z filmem możemy wykorzystać kod dostępny tutaj: https://wordpress.org/support/article/embeds/
Osadzanie filmów z innych mediów za pomocą kodu HTML. Wstawianie iframe na stronę WordPress.
Równie dobrze, z tym samym efektem, możemy wkleić film za pomocą iframe. Taką możliwość daje nam np: YouTube. W przykładzie posłużymy się tym filmem. Będąc w serwisie YouTube pod filmem mamy przycisk [Udostępnij]. Po kliknięciu wybieramy opcję [Umieść] i kopiujemy cały kod zaczynający się od <iframe…> z okna [Umieść film].
Skopiowany kod wklejamy jako blok HTML na stronie lub do wpisu w CMS WordPress.
Możemy również zmienić parametry okna wyświetlania np: szerokość i wysokość okna z filmem. Po zapisaniu w CMSie, film z YouTube na stronie wyświetli się następująco:
WordPress własny film na stronie – jak to zrobić?
Rozszerzenia plików wideo, które można załadować do biblioteki mediów WordPressa:
- .mp4, .m4v (MPEG-4)
- .mov (QuickTime)
- .wmv (Windows Media Video)
- .avi
- .mpg
- .ogv (Ogg)
- .3gp (3GPP)
- .3g2 (3GPP2)
W Gutenbergu skorzystamy z bloku Film:
Natomiast w klasycznym edytorze pliki filmowe dodajemy identycznie jak zdjęcia, poprzez bibliotekę mediów.
Pierwszy problemem, z którym się spotkamy wybierając tę metodę prezentacji filmów to fakt, iż nie wszystkie przeglądarki internetowe obsługują wymienione wyżej formaty wideo. W zawiązku z tym, nasz film w konkretnej przeglądarce po prostu w ogóle się nie wyświetli. A to jednocześnie oznacza zirytowanych użytkowników, którzy bezskutecznie będą próbowali kliknąć w przycisk odtwarzania. Niektóre formaty wideo są zastrzeżone przez patenty i ich odtwarzanie może wymagać dodatkowych wtyczek lub aplikacji. Czasem koniecznym rozwiązaniem jest użycie dwóch formatów video, by zapewnić prawidłowe odtwarzanie filmów w większości popularnych przeglądarek.
Na dzień dzisiejszy najbardziej uniwersalnym formatem wydaje się być MP4 (MPEG4). Z odtwarzaniem go radzi sobie ponad 90% urządzeń typu smart.
Drugi problem to wielkość plików wideo. Jeżeli wrzucamy je sporadycznie, zmartwienia w zasadzie nie ma. Natomiast jeżeli filmów jest dużo, zajmują sporo miejsca na serwerze i wkrótce może okazać się, że musimy wykupić większy pakiet u naszego hostingodawcy.
Co na to wszystko PageSpeed Insights?
Obie metody publikowania filmów na stronach www mają wpływ na szybkość ładowania strony a tym samym na wynik w google speed teście. Dołączanie video z zewnętrznego serwera, z zewnętrznym playerem (np: YouTube) jest wygodne ale powoduje niestety, że znacząco spada wynik w speed teście Google, szczególnie na urządzenia mobilne.
Jeśli zależy Ci na szybkości to lepszym rozwiązaniem jest skorzystanie z shortcode’u “video” i uruchamianie filmu z lokalnej biblioteki mediów. Dzięki niemu mamy nie tylko możliwość wstawienia filmu w dwóch formatach, zapętlenia go, ustawienia “autoplay”, wstępnego ładowania ale co najważniejsze – ustawienia własnego obrazka filmu jako “zajawki”. I to rozwiązanie polecamy. Dzięki temu podczas ładowania strony zaciąga nam się obrazek a nie film, który jest znacznie cięższy. Przykład:
Efekt na stronie działania kodu video:
Ten zabieg pozwoli nam na uzyskanie kilku cennych punktów w google speed teście, które jednocześnie utracimy, jeżeli wstawimy film w zwykły, opisany wyżej sposób. Zwłaszcza dla widoku mobilnego.
Pełny opis i przykładowy kod do przejrzenia i skopiowania tutaj: https://wordpress.org/support/article/video-shortcode/
