Kurs HTML

Wyświetlanie zewnętrznych treści na stronie

Czasami zamiast hostować multimedia samodzielnie, chcemy osadzić na naszej stronie treści pochodzące z innych witryn, takie jak filmy z YouTube, mapy Google, posty z mediów społecznościowych czy nawet całe inne strony internetowe. Do tego celu służy element <iframe> (Inline Frame).

<iframe> tworzy wbudowaną ramkę, która działa jak osobne okno przeglądarki wewnątrz naszej strony, pozwalając na załadowanie i wyświetlenie w niej dokumentu HTML z innego źródła (URL).

Podstawowe użycie <iframe>

Najważniejszym atrybutem jest src, który określa adres URL dokumentu do załadowania w ramce. Należy również zdefiniować wymiary ramki za pomocą width i height.

<!-- Osadzenie innej strony internetowej -->
<iframe src="https://www.wikipedia.org/" width="800" height="600">
  Twoja przeglądarka nie obsługuje ramek inline.
</iframe>Kopiuj

Tekst pomiędzy <iframe> a </iframe> jest wyświetlany tylko w bardzo starych przeglądarkach, które nie obsługują tego elementu.

Kluczowe atrybuty <iframe>

• src (wymagany): Adres URL dokumentu do osadzenia.
• width, height: Wymiary ramki w pikselach lub procentach.
• name: Nazwa ramki, używana np. jako cel dla linków (target="nazwa_ramki") lub do odwołań ze skryptów.
• frameborder: (Przestarzały w HTML5) Określał, czy wyświetlać obramowanie wokół ramki (1 lub 0). Zamiast tego należy używać CSS (border: none;). Wiele serwisów (np. YouTube) nadal dodaje frameborder="0" w generowanym kodzie osadzania dla maksymalnej kompatybilności.
• allow: Kontroluje, jakie funkcje API przeglądarki są dostępne dla treści wewnątrz ramki (np. dostęp do mikrofonu, kamery, geolokalizacji, płatności, pełnego ekranu). Jest to ważne ze względów bezpieczeństwa. Wartość to lista funkcji oddzielonych średnikami.

  <iframe src="..." allow="geolocation; microphone; camera"></iframe>Kopiuj

• allowfullscreen: Atrybut logiczny, pozwala treści w ramce (np. odtwarzaczowi wideo) na przejście do trybu pełnoekranowego. Często wymagany przy osadzaniu filmów. Jest to starszy sposób, nowszym jest dodanie fullscreen do atrybutu allow: allow="fullscreen".
• sandbox: Bardzo ważny atrybut bezpieczeństwa. Włącza dodatkowe ograniczenia dla treści w ramce, traktując ją jako pochodzącą z potencjalnie niezaufanego źródła. Można selektywnie zezwolić na pewne funkcje, podając wartości oddzielone spacją (np. sandbox="allow-scripts allow-same-origin"). Bez podania wartości, sandbox blokuje m.in. skrypty, formularze, wyskakujące okienka, nawigację najwyższego poziomu.
• loading: Określa, jak ramka ma być ładowana: eager (ładuj od razu - domyślne), lazy (ładuj, gdy ramka zbliża się do widocznego obszaru - tzw. lazy loading, oszczędza zasoby).

Osadzanie filmów z YouTube

YouTube i inne platformy wideo zazwyczaj udostępniają gotowy kod HTML do osadzenia filmu na stronie. Kod ten wykorzystuje właśnie <iframe>.

Aby uzyskać kod:

1. Przejdź do strony filmu na YouTube.
2. Kliknij przycisk "Udostępnij" pod filmem.
3. Wybierz opcję "Umieść".
4. Skopiuj wygenerowany kod <iframe>...</iframe> i wklej go na swoją stronę.

Przykład kodu osadzania z YouTube:

<iframe width="560" height="315" 
  src="https://www.youtube.com/embed/VIDEO_ID" 
  title="YouTube video player" 
  frameborder="0" 
  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" 
  referrerpolicy="strict-origin-when-cross-origin" 
  allowfullscreen>
</iframe>Kopiuj

(Zastąp VIDEO_ID rzeczywistym identyfikatorem filmu z YouTube).

Zwróć uwagę na użycie atrybutów allow i allowfullscreen, które są niezbędne do poprawnego działania odtwarzacza YouTube.

Osadzanie map Google

Podobnie jak YouTube, Mapy Google oferują łatwy sposób na osadzenie interaktywnej mapy na stronie za pomocą <iframe>.

1. Otwórz Mapy Google i znajdź interesujące Cię miejsce lub wyznacz trasę.
2. Kliknij ikonę menu (trzy poziome linie) lub przycisk "Udostępnij".
3. Wybierz zakładkę "Umieszczanie mapy".
4. Skopiuj wygenerowany kod <iframe>...</iframe>.

Przykład kodu osadzania z Google Maps:

<iframe 
  src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d..." 
  width="600" height="450" style="border:0;" 
  allowfullscreen="" loading="lazy" 
  referrerpolicy="no-referrer-when-downgrade">
</iframe>Kopiuj

(Adres URL w src będzie znacznie dłuższy i zawierał konkretne parametry mapy).

Zwróć uwagę na użycie loading="lazy", co jest dobrą praktyką dla map, które często nie są od razu widoczne na stronie.

Kwestie bezpieczeństwa: Sandboxing

Osadzanie treści z zewnętrznych źródeł za pomocą <iframe> niesie ze sobą ryzyko bezpieczeństwa. Złośliwa strona osadzona w ramce mogłaby potencjalnie próbować wykonać niechciane akcje (np. uruchomić skrypty, przekierować użytkownika, wyświetlić phishing). Atrybut sandbox pomaga zminimalizować to ryzyko poprzez nałożenie ograniczeń na osadzoną treść.

Użycie <iframe sandbox src="..."></iframe> (bez żadnych wartości) włącza najsilniejsze ograniczenia. Można selektywnie poluzować niektóre z nich, np.:

• allow-scripts: Zezwala na uruchamianie skryptów.
• allow-same-origin: Pozwala traktować treść jako pochodzącą z tej samej domeny (co może być potrzebne do interakcji, ale jest ryzykowne, jeśli źródło nie jest w pełni zaufane).
• allow-forms: Zezwala na wysyłanie formularzy.
• allow-popups: Zezwala na otwieranie wyskakujących okienek.
• allow-top-navigation: Zezwala ramce na nawigację (przekierowanie) okna najwyższego poziomu.

Należy używać sandbox i zezwalać tylko na te funkcje, które są absolutnie niezbędne do działania osadzonej treści.

Zadanie praktyczne (z rozwiązaniem)

Zadanie: Znajdź dowolny film na YouTube, skopiuj jego kod do osadzenia i wklej go na swoją stronę HTML. Upewnij się, że film wyświetla się poprawnie.

Rozwiązanie:

(Zakładamy, że znaleźliśmy film o ID `dQw4w9WgXcQ` - przykładowy popularny film)

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Osadzanie wideo z YouTube</title>
    <style>
        body { font-family: sans-serif; }
        .video-container {
            position: relative;
            padding-bottom: 56.25%; /* Proporcje 16:9 */
            height: 0;
            overflow: hidden;
            max-width: 800px; /* Opcjonalne ograniczenie szerokości */
            margin: 20px auto;
            border: 1px solid #ccc;
        }
        .video-container iframe {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body>

<h1>Przykład osadzonego filmu z YouTube</h1>

<div class="video-container">
  <iframe width="560" height="315" 
    src="https://www.youtube.com/embed/dQw4w9WgXcQ" 
    title="YouTube video player" 
    frameborder="0" 
    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" 
    referrerpolicy="strict-origin-when-cross-origin" 
    allowfullscreen>
  </iframe>
</div>

<p>Powyżej znajduje się film osadzony za pomocą elementu &lt;iframe&gt;. Użyto dodatkowego &lt;div&gt; i stylów CSS, aby zapewnić responsywność odtwarzacza (zachowanie proporcji 16:9 przy zmianie szerokości).</p>

</body>
</html>Kopiuj

Wskazówka: Użycie kontenera div ze stylami CSS (jak w przykładzie) jest popularną techniką tworzenia responsywnych ramek iframe, które zachowują swoje proporcje przy zmianie rozmiaru okna przeglądarki.