Kamil Owczarek
enpl
Opublikowano

Naprawa błędu YouTube 153: sposób zgodny z RODO

Autorzy

Błąd, którego nikt nie rozumie

Użytkownicy zaczęli zgłaszać, że osadzone filmy z YouTube nie chcą się odtwarzać na części naszych stron produktowych. W konsoli pojawiał się enigmatyczny komunikat:

YouTube Error 153: The video is not available

Najbardziej frustrujące? Te same filmy odtwarzały się bez problemu bezpośrednio na YouTube. Wysypywały się dopiero osadzone na naszej stronie — i to nie zawsze. W niektórych przeglądarkach działały, w innych nie. Część użytkowników widziała błąd, część nie.

Co tak naprawdę oznacza błąd 153

Po przekopaniu się przez dokumentację dla developerów YouTube (tyle, ile jej jest) ustaliłem, że błąd 153 zwykle wskazuje na:

  1. Ograniczenia osadzania: właściciel filmu mógł wyłączyć embedowanie
  2. Konflikty z trybem prywatności: funkcje prywatności w przeglądarce blokują trackowanie YouTube
  3. Problemy z polityką referrera: YouTube odrzuca osadzenie na podstawie referrera
  4. Problemy ze zgodami na cookies: blokowanie ciasteczek wynikające z RODO przeszkadza w odtwarzaniu

W naszym przypadku była to kombinacja punktów 2, 3 i 4. Użytkownicy z ostrzejszymi ustawieniami prywatności albo tacy, którzy nie zaakceptowali ciasteczek, dostawali blokadę.

Rozwiązanie: youtube-nocookie.com

YouTube udostępnia alternatywną domenę do osadzania, stworzoną właśnie z myślą o prywatności: youtube-nocookie.com. Ta domena nie ustawia ciasteczek śledzących, dopóki użytkownik faktycznie nie odtworzy filmu.

Przed: problematyczne osadzenie

<iframe
  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"
  allowfullscreen
/>

Po: naprawione osadzenie

<iframe
  src="https://www.youtube-nocookie.com/embed/VIDEO_ID?rel=0&modestbranding=1"
  title="YouTube video player"
  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
  allowfullscreen
  loading="lazy"
  referrerpolicy="strict-origin-when-cross-origin"
/>

Rozłóżmy każdą zmianę na czynniki pierwsze.

Zmiany po kolei

1. Przejście na youtube-nocookie.com

- src="https://www.youtube.com/embed/VIDEO_ID"
+ src="https://www.youtube-nocookie.com/embed/VIDEO_ID"

To kluczowa zmiana. Domena -nocookie:

  • Nie ustawia ciasteczek śledzących, dopóki nie ruszy odtwarzanie
  • Lepiej współgra z flow zgód na cookies wymaganym przez RODO
  • Omija część blokad z rozszerzeń chroniących prywatność
  • Ma tę samą jakość i te same funkcje co zwykły YouTube

2. Dorzucenie parametrów czyszczących UI

+ ?rel=0&modestbranding=1
  • rel=0: nie pokazuj na koniec podobnych filmów z innych kanałów
  • modestbranding=1: minimalny branding YouTube (czystszy wygląd)

3. Usunięcie przestarzałych atrybutów

- frameborder="0"

Atrybut frameborder jest w HTML5 przestarzały. Użyj zamiast niego CSS:

iframe {
  border: none;
}

4. Dodanie lazy loadingu

+ loading="lazy"

To potężny zysk wydajnościowy. Iframe nie załaduje się, dopóki nie znajdzie się blisko viewportu, co oszczędza transfer i skraca czas pierwszego ładowania strony. Szczególnie ważne na stronach z kilkoma filmami.

5. Dodanie polityki referrera

+ referrerpolicy="strict-origin-when-cross-origin"

To mówi przeglądarce, żeby wysyłała ograniczony nagłówek referrera, co:

  • Poprawia prywatność użytkowników
  • Zmniejsza ryzyko odrzucenia osadzenia
  • Jest zgodne z nowoczesnymi praktykami bezpieczeństwa w webie

6. Aktualizacja uprawnień w allow

- allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+ allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"

Dodałem web-share, żeby przycisk udostępniania działał w trybie pełnoekranowym.

Filmy z autoodtwarzaniem

Filmy, które mają startować same (na przykład tła albo sekcje hero), potrzebują dodatkowych parametrów:

<iframe
  src="https://www.youtube-nocookie.com/embed/VIDEO_ID?autoplay=1&mute=1&loop=1&playlist=VIDEO_ID&rel=0&modestbranding=1"
  title="YouTube video player"
  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
  allowfullscreen
  loading="lazy"
  referrerpolicy="strict-origin-when-cross-origin"
/>

Najważniejsze dodatki dla autoplaya:

  • autoplay=1: zacznij odtwarzać od razu
  • mute=1: wymagane, żeby autoplay w ogóle zadziałał (polityka przeglądarek)
  • loop=1: zacznij od nowa po zakończeniu
  • playlist=VIDEO_ID: wymagane, żeby zapętlenie działało (tak, powtarzasz to samo ID)

Komponent wielokrotnego użytku

W projektach na Vue/Nuxt warto zamknąć to w komponencie:

<!-- components/YoutubeVideo.vue -->
<template>
  <iframe
    :src="embedUrl"
    title="YouTube video player"
    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
    referrerpolicy="strict-origin-when-cross-origin"
    allowfullscreen
    loading="lazy"
    class="aspect-video w-full"
  />
</template>

<script setup lang="ts">
const props = defineProps<{
  videoId: string
  autoplay?: boolean
}>()

const embedUrl = computed(() => {
  const base = `https://www.youtube-nocookie.com/embed/${props.videoId}`
  const params = new URLSearchParams({
    rel: '0',
    modestbranding: '1',
  })

  if (props.autoplay) {
    params.set('autoplay', '1')
    params.set('mute', '1')
    params.set('loop', '1')
    params.set('playlist', props.videoId)
  }

  return `${base}?${params.toString()}`
})
</script>

Użycie:

<!-- Regular video -->
<YoutubeVideo video-id="dQw4w9WgXcQ" />

<!-- Autoplay video -->
<YoutubeVideo video-id="dQw4w9WgXcQ" autoplay />

Efekty

Po wdrożeniu tych zmian na 9 osadzonych filmach:

  • Zgłoszenia błędu 153 spadły do zera
  • Czasy ładowania stron się poprawiły (lazy loading)
  • Zgodność z RODO wzrosła (żadnych ciasteczek przed odtworzeniem)
  • Czystsze UI odtwarzacza (bez przypadkowych podpowiedzi filmów)
  • Lepsza prywatność (ograniczone nagłówki referrera)

Szybka checklista

Osadzając filmy z YouTube w 2024 roku i później, upewnij się, że:

  • Używasz youtube-nocookie.com zamiast youtube.com
  • Dodałeś loading="lazy" dla wydajności
  • Dodałeś referrerpolicy="strict-origin-when-cross-origin"
  • Usunąłeś przestarzały atrybut frameborder
  • Dorzuciłeś rel=0, żeby ukryć niepowiązane propozycje filmów
  • Przy autoplayu masz mute=1 oraz playlist=VIDEO_ID dla zapętlenia

Typowe błędy, których warto uniknąć

1. Pominięcie parametru playlist przy zapętleniu

// Won't loop
src = '...?autoplay=1&mute=1&loop=1'

// Will loop
src = '...?autoplay=1&mute=1&loop=1&playlist=VIDEO_ID'

2. Liczenie na autoplay z dźwiękiem

Przeglądarki blokują autoodtwarzanie z dźwiękiem. Przy autoplayu zawsze dodawaj mute=1.

3. Złe uprawnienia w allow

Upewnij się, że autoplay jest w atrybucie allow, jeśli chcesz, żeby autoodtwarzanie działało:

allow="autoplay; ..."

Nie tylko dla błędu 153

Nawet jeśli nie widzisz błędu 153, i tak rozważ przejście na youtube-nocookie.com. Ta domena:

  • Lepiej wspiera zgodność z RODO
  • Bardziej szanuje prywatność użytkowników
  • Rzadziej bywa blokowana przez rozszerzenia
  • Ma tę samą jakość i te same funkcje

Migracja jest banalna — znajdź i zamień domenę, a potem dodaj rekomendowane atrybuty.

Prawdziwa poprawka ze sklepu internetowego obsługującego rynki europejskie, gdzie zgodność z RODO ma znaczenie.

Zobacz na GitHubie