Video Center - Osadzanie filmu na stronie internetowej

Wprowadzenie

OVHcloud Video Center to platforma hostingu wideo, która generuje kod osadzania (iframe) umożliwiający wyświetlanie filmów na dowolnej stronie internetowej.

Dzięki temu przewodnikowi Twój film hostowany w Video Center będzie widoczny na Twojej stronie internetowej, z responsywnym wyświetlaniem na urządzeniach mobilnych i komputerach.

W zależności od środowiska opisano 3 metody:

  • Kod osadzania (iframe): do użycia, jeśli masz dostęp do kodu HTML swojej strony internetowej.
  • Edytor CMS (Content Management System): odpowiedni dla Wix, Squarespace, Webflow, Joomla i innych popularnych CMS-ów.
  • WordPress bez wtyczki: za pomocą natywnego bloku HTML edytora Gutenberg.

Szacowany czas: mniej niż 5 minut.

Wymagania początkowe

  • Posiadanie aktywnego Video Center OVHcloud.
  • Posiadanie dostępu do edycji swojej strony internetowej (back-office, edytor motywu lub pliki HTML).

Dostęp do Panelu klienta OVHcloud

  • Bezpośredni link:
  • Aby uzyskać dostęp do swoich usług: Web Cloud > Video Center

W praktyce

Uzyskaj kod osadzania filmu

Niezależnie od wybranej metody, zacznij od skopiowania kodu osadzania z Video Center.

Kod osadzania jest generowany automatycznie przez Video Center dla każdego filmu, na jego stronie szczegółów. Kliknij poniższe tabsy, aby kolejno wyświetlić każdy z 3 etapów.

Etap 1
Etap 2
Etap 3

Przejdź do strony w Panelu klienta OVHcloud.

Strona Video Center wyświetlająca filmy hostowane na koncie

Wybierz swoją ofertę z listy.

Kod wygląda następująco:

<iframe
  src="https://streaming.media.ovhcloud.com/vod/embed/XXXX-XXXX-XXXX"
  width="640"
  height="360"
  frameborder="0"
  allowfullscreen>
</iframe>
Info

Zachowaj ten kod pod ręką: będzie potrzebny dla 3 metod opisanych poniżej.

Osadź film na swojej stronie internetowej

Wybierz metodę odpowiadającą Twojemu środowisku.

Metoda 1 — Kod osadzania (iframe) w czystym HTML

Użyj tej metody, jeśli masz bezpośredni dostęp do kodu HTML swojej strony.

  • Otwórz plik HTML swojej strony: w edytorze kodu (Visual Studio Code, Dreamweaver itp.) otwórz stronę, na której chcesz wyświetlić film.
  • Ustaw kursor: umieść go w miejscu, w którym ma się znaleźć film.
  • Wklej kod osadzania: wklej kod skopiowany z Video Center.
  • Zapisz i opublikuj: zapisz plik i zaktualizuj swój serwer (FTP: File Transfer Protocol, wdrożenie itp.).

Przykładowy wynik w pliku HTML:

<section class="ma-section-video">
  <h2>Ma présentation</h2>

  <iframe
    src="https://streaming.media.ovhcloud.com/vod/embed/XXXX-XXXX-XXXX"
    width="640"
    height="360"
    frameborder="0"
    allowfullscreen>
  </iframe>
</section>
Metoda 2 — Edytor CMS (Wix, Squarespace, Webflow, Joomla…)

Większość CMS-ów oferuje niestandardowy blok HTML do wstawiania kodu zewnętrznego na stronę.

  • Otwórz edytor strony: przejdź do edycji strony, na której chcesz wyświetlić film.
  • Dodaj blok HTML: w zależności od CMS-a użyj bloku wskazanego poniżej.
  • Wklej kod osadzania: w polu bloku HTML wklej kod iframe skopiowany z Video Center.
  • Zatwierdź i opublikuj: zatwierdź wstawienie i opublikuj stronę.

Blok do użycia w zależności od CMS-a:

  • Wix: Aplikacja Wix > Kod HTML.
  • Squarespace: Block > Code.
  • Webflow: Element > Embed.
  • Joomla: Edytor > wyłącz filtr HTML > wklej kod.
  • PrestaShop: Moduł > Niestandardowy HTML.
Info

Jeśli Twój CMS filtruje iframe ze względów bezpieczeństwa, poszukaj w jego ustawieniach opcji "Zezwól na surowy HTML" lub "Wyłącz filtr treści".

Metoda 3 — WordPress bez wtyczki (blok HTML)

WordPress natywnie zawiera blok Niestandardowy HTML w edytorze Gutenberg. Żadna wtyczka nie jest wymagana.

  • Otwórz stronę lub artykuł: na pulpicie WordPress otwórz stronę lub artykuł do edycji.
  • Dodaj blok Niestandardowy HTML: kliknij +, aby dodać blok, następnie wyszukaj i wybierz Niestandardowy HTML.
  • Wklej kod osadzania: w bloku HTML wklej kod iframe skopiowany z Video Center.
  • Wyświetl podgląd: kliknij Podgląd, aby sprawdzić wygląd przed publikacją.
  • Opublikuj: kliknij Zaktualizuj lub Opublikuj.
Info

Jeśli używasz starego edytora WordPress (TinyMCE / Klasyczny), przed wklejeniem kodu przełącz się na tryb Tekstowy (a nie Wizualny), a następnie wróć do trybu Wizualnego, aby sprawdzić wygląd.

Dostosuj osadzony odtwarzacz wideo

Jak zmienić rozmiar filmu?

Dostosuj atrybuty width i height w kodzie iframe:

<!-- Standard fixed size (16:9) -->
<iframe src="..." width="640" height="360" ...></iframe>

<!-- Larger size -->
<iframe src="..." width="1280" height="720" ...></iframe>

<!-- 100% of the container width -->
<iframe src="..." width="100%" height="400" ...></iframe>
Jak sprawić, by film był responsywny na urządzeniach mobilnych?

Otocz iframe kontenerem CSS, aby uzyskać płynne wyświetlanie na wszystkich ekranach:

<div style="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden;">
  <iframe
    src="https://streaming.media.ovhcloud.com/vod/embed/XXXX-XXXX-XXXX"
    style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"
    frameborder="0"
    allowfullscreen>
  </iframe>
</div>
Info

Proporcja padding-bottom: 56.25% odpowiada formatowi 16:9 (najpopularniejszy). Dla formatu 4:3 użyj 75%.

Jak wyłączyć tryb pełnoekranowy?

Usuń atrybut allowfullscreen, jeśli chcesz uniemożliwić tryb pełnoekranowy:

<iframe src="..." width="640" height="360" frameborder="0"></iframe>

Sprawdź integrację swojego filmu

Przed uznaniem integracji za zakończoną sprawdź następujące punkty:

Na komputerze:

  • Film jest poprawnie wyświetlany na stronie.
  • Odtwarzacz ładuje się bez komunikatu o błędzie.
  • Odtwarzanie rozpoczyna się po kliknięciu Play.
  • Tryb pełnoekranowy działa (jeśli jest aktywny).

Na urządzeniach mobilnych:

  • Film dostosowuje się do szerokości ekranu (responsywny).
  • Odtwarzanie działa na iOS (Safari) i Android (Chrome).
  • Film nie jest obcinany przez krawędzie ekranu.
Info

Wykonuj testy na rzeczywistym urządzeniu, a nie w trybie symulacji przeglądarki — zachowanie może się różnić na iOS.

Częste problemy

Dlaczego mój film nie jest wyświetlany?

W zależności od przyczyny:

  • URL osadzania jest nieprawidłowy: wróć do Video Center i skopiuj ponownie kod osadzania.
  • Film jest jeszcze przetwarzany: poczekaj na zakończenie kodowania w Video Center przed osadzeniem go.
  • CMS filtruje iframe: aktywuj zezwolenie na iframe w jego ustawieniach.
  • Strona używa HTTPS, ale URL osadzania używa HTTP: sprawdź, czy URL w iframe zaczyna się od https://.
Dlaczego dźwięk nie działa?

Niektóre przeglądarki blokują automatyczne odtwarzanie z dźwiękiem. Odtwarzanie ręczne (kliknięcie Play) działa normalnie.

Dlaczego film jest źle wymiarowany lub wykracza poza krawędzie?

Użyj techniki responsywnej opisanej w sekcji Dostosuj osadzony odtwarzacz wideo powyżej, z relatywnym kontenerem CSS.

Jak rozwiązać komunikat "Treść zablokowana" w WordPress?

Przejdź do Ustawienia > Czytanie w WordPress i sprawdź, czy zewnętrzne iframe nie są blokowane. Niektóre wtyczki bezpieczeństwa (Wordfence, iThemes Security) mogą filtrować iframe.

Warning

Nigdy nie wyłączaj całkowicie filtrów bezpieczeństwa swojego CMS-a. Dodaj jedynie domenę streaming.media.ovhcloud.com do listy dozwolonych źródeł, jeśli ta opcja jest dostępna.

Sprawdź również

Zarządzaj swoimi filmami w OVHcloud Video Center

W przypadku usług specjalistycznych (pozycjonowanie, programowanie itp.), skontaktuj się z partnerami OVHcloud.

Dołącz do grona naszych użytkowników.

Czy ta strona była pomocna?