Wideo na stronie WordPress – formaty i sposoby osadzania

Home » Blog

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
  • Facebook
  • Flickr
  • Hulu
  • Instagram
  • 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:

Osadzanie wideo w Gutenbergu

W klasycznym edytorze jest to równie banalne, bo wystarczy wkleić link w okno samego edytora:

Osadzanie wideo w edytorze klasycznym

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

Kopiowanie kodu iframe z filmem z YouTube

Skopiowany kod wklejamy jako blok HTML na stronie lub do wpisu w CMS WordPress.

wordpress wstawianie iframe
WordPress wstawianie iframe

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:

Dodawanie filmu do strony WordPress

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:

WordPress – shordcode video – wyświetlanie filmu wideo z własnego serwera.

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/

Dołącz do WordPressowego Newslettera!

Nie częściej niż raz w miesiącu otrzymasz od nas praktyczne wskazówki o WordPressie i nowości z naszego bloga. Dołącz bo warto!