---
title: "Video Center - Osadzanie filmu na stronie internetowej"
description: "Skopiuj kod osadzania filmu z Video Center i zintegruj go w mniej niż 5 minut przy użyciu iframe, edytora CMS lub bloku HTML WordPress."
url: https://docs.ovhcloud.com/pl/guides/web-cloud/video-center/website-integration
lang: pl
lastUpdated: 2026-05-27
---
# 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](https://www.ovhcloud.com/pl/video-center/).
- Posiadanie dostępu do edycji swojej strony internetowej (back-office, edytor motywu lub pliki HTML).


***

### Dostęp do Panelu klienta OVHcloud

- **Bezpośredni link:** <ManagerLink to="/beta/#/web-cloud/video-center">Video Center</ManagerLink>
- **Aby uzyskać dostęp do swoich usług:** <code className="action">Web Cloud</code> > <code className="action">Video Center</code>

***


## 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**

Przejdź do strony <ManagerLink to="/beta/#/web-cloud/video-center">Video Center</ManagerLink> w Panelu klienta OVHcloud.
![Strona Video Center wyświetlająca filmy hostowane na koncie](/images/guides/web-cloud/video-center/website-integration/video-center-selection-plan.png)Wybierz swoją ofertę z listy.


**Etap 2**

Na wyświetlonej stronie kliknij <code className="action">Przejdź do Video Center</code>.
![Przycisk Przejdź do Video Center na stronie oferty](/images/guides/web-cloud/video-center/website-integration/access-video-center.png)

**Etap 3**

Kliknij film, który chcesz osadzić, aby otworzyć jego stronę szczegółów.
![Przyciski Udostępnij / Kod osadzania wyświetlające kod iframe filmu w Video Center](/images/guides/web-cloud/video-center/website-integration/integrate-video.png)Kliknij <code className="action">Udostępnij</code> lub <code className="action">Kod osadzania</code>, a następnie skopiuj wyświetlony kod.


Kod wygląda następująco:

```html
<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**: **F**ile **T**ransfer **P**rotocol, wdrożenie itp.).
Przykładowy wynik w pliku HTML:
```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 <code className="action">+</code>, 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 <code className="action">Podgląd</code>, aby sprawdzić wygląd przed publikacją.
- **Opublikuj**: kliknij <code className="action">Zaktualizuj</code> lub <code className="action">Opublikuj</code>.
:::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:
```html
<!-- 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:
```html
<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:
```html
<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 <code className="action">Ustawienia</code> > <code className="action">Czytanie</code> 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](/pl/guides/web-cloud/video-center/manage-videos.md)

W przypadku usług specjalistycznych (pozycjonowanie, programowanie itp.), skontaktuj się z [partnerami OVHcloud](https://partner.ovhcloud.com/pl/directory/).

Dołącz do [grona naszych użytkowników](https://community.ovhcloud.com/).