Specyfikacja banera HTML5 z zaszytym wideo: Google Ads, DV360, CM360 i IAB (2026)

Baner HTML5 z wideo zaszytym w paczce ZIP nie przejdzie w zwykłej kampanii Google Ads: lista dozwolonych plików HTML5 w Google Ads nie obejmuje plików wideo, a cała paczka może ważyć najwyżej 600 KB. Taki baner buduje się pod Display & Video 360 i Campaign Manager 360 (kreacja z Google Web Designer albo Studio, wideo przez tag <video>), pod Ad Managera wydawcy albo pod sieci programmatic działające według wytycznych IAB. Wszędzie obowiązują trzy zasady: wideo startuje bez dźwięku, dźwięk włącza dopiero użytkownik, a ciężkie pliki ładują się dopiero po załadowaniu strony (polite load). Poniżej: co obowiązuje gdzie, tabele specyfikacji, gotowy szablon kodu, checklista i najczęstsze powody odrzucenia.

Gdzie przejdzie baner HTML5 z wideo

Zanim grafik zacznie pracę, ustal, gdzie kreacja będzie emitowana. Od tego zależy, czy wideo w ogóle może być częścią paczki, ile może ważyć i jak zbudować kliknięcie.

Wniosek praktyczny: jeśli kampania ma ruszyć z konta Google Ads, a klient chce „baner z filmem”, wybierz jedną z dróg opisanych niżej w sekcji o Google Ads. Baner z prawdziwym plikiem wideo w środku to kreacja pod DV360, CM360 albo pod konkretnego wydawcę.

Google Ads: HTML5 tak, wideo w paczce nie

Specyfikacja przesyłanych reklam displayowych w Google Ads opisuje HTML5 jako paczkę ZIP z plikiem HTML i opcjonalnie CSS, JS, GIF, PNG, JPG, JPEG oraz SVG. Plików MP4 ani WebM na tej liście nie ma. Do tego dochodzą ograniczenia, które w praktyce wykluczają też wideo ładowane z zewnątrz:

• Waga i liczba plików: ZIP do 600 KB, nie więcej niż 40 plików.
• Zasoby zewnętrzne: wszystkie pliki muszą być w paczce i wskazywane ścieżką względną. Wyjątki to Google Fonts oraz biblioteki CreateJS, GreenSock i jQuery hostowane przez Google pod s0.2mdn.net/ads/studio/cached_libs/. Wideo z YouTube, z serwera klienta czy z CDN nie przejdzie.
• Wymagany kod: deklaracja <!DOCTYPE html>, znaczniki <html> i <body>, meta tag ad.size w sekcji <head>, jawne znaczniki zamykające (również w SVG) i kodowanie UTF-8.
• Zakazy: reklamy rozwijane (expandable), local storage, czcionki spoza Google Fonts.
• Animacja: maksymalnie 30 sekund; pętle są dozwolone, ale cała animacja musi się zatrzymać w ciągu 30 sekund.

Google Web Designer potwierdza to od strony narzędzia: w środowisku Google Ads nie ma komponentów multimedialnych (Wideo, Audio, YouTube), są tylko m.in. galerie, przyciski obrazkowe, obszary kliknięcia, efekty graficzne i sprite sheet.

Kto w ogóle ma dostęp do HTML5 w Google Ads

Przesyłanie reklam HTML5 nie jest dostępne na każdym koncie. Według pomocy Google konto musi działać ponad 90 dni, mieć ponad 9000 USD łącznych wydatków, dobrą historię zgodności z zasadami i płatności. O dostęp trzeba wnioskować; odpowiedź przychodzi w ciągu 7 dni roboczych, a spełnienie warunków nie gwarantuje zgody. Nowe konto lub mały budżet oznacza w praktyce banery statyczne albo elastyczne reklamy displayowe.

Co zrobić, gdy w Google Ads potrzebny jest film

• Elastyczna reklama displayowa z wideo. Do elastycznej reklamy displayowej możesz dodać opcjonalnie do 5 filmów z YouTube. Google sam dobiera format i miejsce, a Ty nie budujesz żadnego ZIP-a.
• Kampania wideo lub Demand Gen. Jeśli film jest głównym nośnikiem przekazu, wgraj go na YouTube i emituj jako reklamę wideo, a nie jako baner.
• Animacja zamiast wideo. Krótką sekwencję z filmu można odtworzyć jako animację HTML5 (sprite sheet, kilka klatek JPG, animacja CSS albo GSAP z CDN Google) w limicie 600 KB i 30 sekund. To nadal reklama HTML5, więc wymaga dostępu do HTML5 na koncie.
• DV360 lub CM360. Jeśli baner z filmem jest wymogiem kampanii (np. premiera, kampania wizerunkowa), emisja przez Display & Video 360 rozwiązuje problem formatu i daje dostęp do inwentarza wydawców premium.

Display & Video 360, Campaign Manager 360 i Studio

To główne środowisko dla banerów z zaszytym wideo. Wytyczne DV360 dla kreacji HTML5 mówią wprost: reklama może automatycznie odtwarzać wideo, o ile dźwięk jest wyciszony, a reklamy, które same odtwarzają dźwięk, są zakazane. Najważniejsze limity:

Wideo w kreacji Studio dodaje się zwykłym tagiem <video> z atrybutami muted i playsinline. Adres pliku w środowisku produkcyjnym zwraca Enabler.getUrl(), a statystyki odtworzeń zbiera moduł wideo Studio (studio.video.Reporter.attach()). Google zaznacza, że kreacja z elementem wideo nalicza opłatę za emisję wideo w serwerze reklam. W Google Web Designer wybierasz środowisko „Display & Video 360”, a Enabler jest dołączany automatycznie.

Programmatic i wytyczne IAB

Wydawcy i sieci programmatic opierają specyfikacje na IAB New Ad Portfolio i zasadach LEAN (lekkie, szyfrowane, z wyborem użytkownika, nieinwazyjne). IAB rozdziela wagę kreacji na ładowanie początkowe (initial load) i ładowanie dodatkowe (subload), które startuje po załadowaniu strony.

Pozostałe zasady IAB istotne dla wideo w banerze:

• ładowanie początkowe to najwyżej 10 żądań plików, a subload startuje sekundę po zdarzeniu DOMContentLoaded,
• maksymalna waga kreacji 1,1 MB (w starszych wytycznych ten limit dotyczył właśnie wideo uruchamianego przez hosta, z długością do 15 sekund),
• dźwięk domyślnie wyciszony,
• animacja maksymalnie 15 sekund, bez pętli po tym czasie (to ostrzej niż 30 sekund w Google),
• wideo startuje, gdy co najmniej 50% pikseli reklamy jest w widoku, i zatrzymuje się, gdy widoczność spadnie poniżej 50%.

Specyfikacje wydawców bywają łagodniejsze od IAB dla wideo (często 1–2,2 MB ładowania dodatkowego), ale zawsze wygrywa specyfikacja konkretnego wydawcy. Poproś o nią przed startem produkcji.

Niezależnie od platformy Chrome blokuje „ciężkie reklamy” (heavy ad intervention), jeśli bez interakcji użytkownika reklama pobierze ponad 4 MB danych albo zajmie główny wątek przeglądarki na ponad 15 sekund w dowolnym oknie 30 sekund lub łącznie ponad 60 sekund. Zablokowana reklama znika z ekranu, więc wideo w banerze trzeba trzymać wyraźnie poniżej 4 MB.

Specyfikacja techniczna banera HTML5 z wideo

Rozmiary

Pełna lista rozmiarów Google Ads dla HTML5: 200×200, 240×400, 250×250, 250×360, 300×250, 336×280, 580×400, 120×600, 160×600, 300×600, 300×1050, 468×60, 728×90, 930×180, 970×90, 970×250, 980×120, 300×50, 320×50 i 320×100.

Paczka i pliki

Plik wideo

Platformy reklamowe nie podają osobnych parametrów kodowania wideo w banerze. Poniższe wartości wynikają z obsługi kodeków w przeglądarkach i z limitów wagi; traktuj je jako bezpieczny punkt startowy, a ostatecznie dopasuj do specyfikacji wydawcy.

Zachowanie reklamy

clickTag w Google Ads, CM360 i Studio

clickTag to zmienna, w której serwer reklam podstawia adres kliknięcia z własnym śledzeniem. Adres strony docelowej ustawiasz w panelu, nie w kodzie. Wpisany na sztywno URL to jeden z najczęstszych powodów odrzucenia.

Szablon kodu: baner HTML5 300×250 z wideo

Minimalny szablon dla CM360 (zwykła kreacja HTML5), Ad Managera i serwerów reklam programmatic działających na clickTag. Zawiera meta tag rozmiaru, clickTag, wyciszone wideo ładowane po load strony, przycisk dźwięku, poster jako obraz zastępczy i zatrzymanie po 15 sekundach.

Struktura paczki:

baner-300x250.zip
├── index.html
├── poster.jpg     (300×250, 20–40 KB, pierwsza klatka)
└── video.mp4      (H.264 + AAC, 6–15 s, 1–2 MB)
obraz zapasowy: baner-300x250-backup.jpg (poza ZIP-em)

Plik index.html:

<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="utf-8">
<meta name="ad.size" content="width=300,height=250">
<title>Baner 300x250 z wideo</title>
<script type="text/javascript">
var clickTag = "https://www.example.com/";
</script>
<style>
html, body { margin: 0; padding: 0; }
#ad { position: relative; width: 298px; height: 248px; overflow: hidden;
      border: 1px solid #cccccc; background: #000000 url("poster.jpg") center / cover no-repeat;
      font-family: Arial, sans-serif; }
#exit { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; cursor: pointer; }
#ad video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }
#cta { position: absolute; left: 12px; bottom: 12px; padding: 8px 14px; background: #ffcc00;
       color: #111111; font-size: 14px; font-weight: bold; border-radius: 4px; }
#sound { position: absolute; top: 8px; right: 8px; z-index: 2; width: 32px; height: 32px;
         border: 0; border-radius: 50%; background: rgba(0, 0, 0, 0.6); color: #ffffff;
         font-size: 16px; line-height: 32px; cursor: pointer; }
</style>
</head>
<body>
<div id="ad">
  <video id="video" muted playsinline preload="none" poster="poster.jpg" aria-hidden="true"></video>
  <div id="exit" role="link" tabindex="0" aria-label="Przejdź do strony reklamodawcy"><span id="cta">Sprawdź ofertę</span></div>
  <button id="sound" type="button" aria-label="Włącz dźwięk" aria-pressed="false">&#128263;</button>
</div>
<script type="text/javascript">
(function () {
  var exit = document.getElementById('exit');
  var video = document.getElementById('video');
  var sound = document.getElementById('sound');
  var MAX_MS = 15000;

  function openLanding() {
    window.open(window.clickTag, '_blank');
  }

  function stopVideo() {
    video.pause();
  }

  function startVideo() {
    var src = document.createElement('source');
    src.src = 'video.mp4';
    src.type = 'video/mp4';
    video.appendChild(src);
    video.load();
    var p = video.play();
    if (p && typeof p.catch === 'function') {
      p.catch(function () { /* autoplay zablokowany: zostaje poster */ });
    }
    setTimeout(stopVideo, MAX_MS);
  }

  exit.addEventListener('click', openLanding);
  exit.addEventListener('keydown', function (e) {
    if (e.key === 'Enter') { openLanding(); }
  });

  sound.addEventListener('click', function () {
    video.muted = !video.muted;
    if (!video.muted && video.paused) { video.play(); }
    sound.setAttribute('aria-pressed', video.muted ? 'false' : 'true');
    sound.setAttribute('aria-label', video.muted ? 'Włącz dźwięk' : 'Wycisz');
    sound.innerHTML = video.muted ? '&#128263;' : '&#128266;';
  });

  if (document.readyState === 'complete') {
    startVideo();
  } else {
    window.addEventListener('load', startVideo);
  }
})();
</script>
</body>
</html>

Kilka decyzji w tym kodzie jest celowych:

• Wideo nie ma src w HTML. Źródło jest dopinane dopiero po zdarzeniu load strony, więc ładowanie początkowe to sam HTML i poster (polite load).
• Szerokość 298×248 + ramka 1 px daje dokładnie 300×250 łącznie z ramką.
• Przycisk dźwięku leży nad warstwą kliknięcia (z-index: 2), więc włączenie dźwięku nie otwiera strony docelowej.
• Po 15 sekundach wideo się zatrzymuje; jeśli użytkownik sam włączy dźwięk, odtwarzanie wznawia jego kliknięcie, a nie reklama.
• Odrzucony autoplay (np. tryb oszczędzania energii) nie psuje reklamy: zostaje poster z CTA.

Ten szablon nie trafi do Google Ads, bo zawiera plik MP4. Wersja dla Google Ads to ta sama struktura bez wideo: poster lub animacja z obrazów, ten sam clickTag i meta tag ad.size, ZIP do 600 KB.

Wersja dla Studio (DV360, CM360 rich media)

W kreacji Studio zamiast clickTag używasz Enablera. Do sekcji <head> dodajesz <script src="https://s0.2mdn.net/ads/studio/Enabler.js"></script>, usuwasz zmienną clickTag i funkcję openLanding, a logikę startu zastępujesz kodem z polite load i raportowaniem wideo:

var video = document.getElementById('video');

function politeInit() {
  var file = 'video.mp4';
  var src = document.createElement('source');
  src.src = Enabler.isServingInLiveEnvironment() ? Enabler.getUrl(file) : file;
  src.type = 'video/mp4';
  video.appendChild(src);
  Enabler.loadModule(studio.module.ModuleId.VIDEO, function () {
    studio.video.Reporter.attach('video_1', video);
  });
  video.play();
}

function init() {
  document.getElementById('exit').addEventListener('click', function () {
    video.pause();
    Enabler.exit('Background Exit');
  });
  if (Enabler.isPageLoaded()) {
    politeInit();
  } else {
    Enabler.addEventListener(studio.events.StudioEvent.PAGE_LOADED, politeInit);
  }
}

if (Enabler.isInitialized()) {
  init();
} else {
  Enabler.addEventListener(studio.events.StudioEvent.INIT, init);
}

Przycisk dźwięku i zatrzymanie po 15 sekundach zostają bez zmian. Identyfikator video_1 musi być unikalny w kreacji, bo po nim Studio łączy statystyki odtworzeń z raportem kampanii.

Checklista przed wysłaniem banera

1. Platforma emisji ustalona, a jej limity spisane (Google Ads / DV360 / CM360 / specyfikacja wydawcy).
2. Rozmiar w meta tagu ad.size zgodny z rzeczywistym rozmiarem banera i zamówieniem.
3. clickTag w <head>, niezminifikowany; w kodzie nie ma adresu strony docelowej wpisanego na sztywno (poza wartością domyślną clickTag).
4. Kliknięcie otwiera nową kartę; przycisk dźwięku nie wywołuje kliknięcia w reklamę.
5. Wideo z atrybutami muted i playsinline, startuje po load strony.
6. Animacja i wideo kończą się w 15 s (IAB) lub 30 s (Google); na końcu plansza z marką i CTA.
7. Wszystkie ścieżki względne; jedyne zasoby zewnętrzne to dozwolone biblioteki (Google Fonts, s0.2mdn.net).
8. Waga ZIP i liczba plików w limicie; łączna waga z wideo poniżej 4 MB (limit Chrome), a najlepiej 1–2 MB.
9. W paczce brak nieużywanych plików, ukrytych plików systemowych (__MACOSX, .DS_Store), zagnieżdżonych ZIP-ów i nazw ze znakiem %.
10. Brak localStorage i sessionStorage, pop-upów, automatycznych przekierowań.
11. Poster zgodny z pierwszą klatką; obraz zapasowy przygotowany osobno w tym samym rozmiarze.
12. Ramka 1 px przy jasnym tle; tekst czytelny bez dźwięku.
13. Test w Chrome, Safari (iOS) i Firefoksie oraz w walidatorze platformy.

Najczęstsze powody odrzucenia

Jak testować baner HTML5 z wideo

• HTML5 Validator Google (h5validator.appspot.com): wgraj ZIP przed wysyłką i sprawdź raport błędów oraz ostrzeżeń dla docelowej platformy.
• Podgląd przy przesyłaniu do Google Ads: panel pokazuje błędy paczki (typ pliku, waga, brak ad.size) od razu przy dodawaniu reklamy HTML5.
• Studio: podgląd kreacji i proces QA w Studio przed przekazaniem do CM360 lub DV360; sprawdź, czy exit jest rejestrowany, a moduł wideo raportuje odtworzenia.
• Przeglądarka: otwórz index.html lokalnie w Chrome i Safari, w narzędziach deweloperskich ustaw dławienie sieci (Slow 4G) i sprawdź, co widać przed załadowaniem wideo, ile danych pobiera reklama i czy kliknięcie otwiera nową kartę.
• Telefon z iOS: wideo musi grać w banerze, nie na pełnym ekranie (playsinline), a przycisk dźwięku musi reagować na dotyk.

Najczęstsze pytania

Podsumowanie

Baner HTML5 z zaszytym wideo to kreacja pod DV360, CM360 (Studio) i wydawców, nie pod zwykłe konto Google Ads. Zanim zamówisz produkcję, ustal platformę emisji i spisz jej limity: wagę, liczbę plików, długość animacji i sposób kliknięcia. Wideo zawsze startuje wyciszone i po załadowaniu strony, waży 1–2 MB, a reklama działa także wtedy, gdy film się nie odtworzy.

W ICBM przygotowujemy i wdrażamy kampanie displayowe i wideo w Google Ads oraz Display & Video 360: od wyboru formatu i specyfikacji dla grafika, przez sprawdzenie paczek przed emisją, po optymalizację i raportowanie. Zobacz ofertę kampanii w sieci reklamowej, programmatic i kampanii wideo albo napisz do nas.