Fullscreen HTML5 with video

Description

This template works only with insert codes that use loader.js library - in document such codes are marked NEW .

Fullscreen HTML5 with video - fullscreen banner with video, you can add it using video file, VPAID-creative or HTML5 creative.
Banner is shown by timer, which can be set in ADFOX interface, or until the user closes the banner by clicking "Close" button.

Banner consists of two parts - a banner wrapper (background and control panel) and a container with advertising content. Wrapper always takes 100% of the width and height of the window. Advertising content is always located in the center of the screen and its size is selected automatically, so that the video does not exceed the screen size and its own size.

Format is cross-platform - it is shown on desktops, tablets and mobile phones.
Playback is carried out by HTML5 video player. Format is fully compatible with VAST and VPAID video advertising specifications, supports standard events (event tracking), which are requested at the time of their occurrence in the player.

Banner features available when added to ADFOX:
- Videoplayback in HTML5 creative or directly on the banner's backing.
- Video can be added to the banner as a video file or a link to the wrapper XML.
- Banner control panel consists of the following elements:
  "Mute / Unmute" button: adjustable visibility and sound on playback start, it is possible to specify custom buttons;
  countdown timer before the banner is closed: timer's visibility and colour is adjustable;
  text next to the timer: arbitrary text or default text "Advertisement”;
  Close button: visibility or deferred display of the button is adjustable, it is possible to specify custom image for it;
  
  "Details" button, located at the bottom center of the screen. Visibility and text of the button is adjustable, it is possible to specify custom CSS styles for it.
  

Features of the format:
- Visibility check of the Fullscreen HTML5 format begins only if at least 1px of the banner is in the active browser window for at least 2 seconds.
- Banner can not control display of control buttons inside VPAID, so if VAST contains VPAID-creative, volume button will be hidden.
- "Details" button will not be shown for VPAID creatives.
- it's also possible to have your own ad-skip button in VPAID-creatives.
- You need to consider location of the buttons in VPAID. If you place buttons at the top and turn banner by 100% of it’s height, then they can not be clicked, since they will be blocked by the banner control panel.
- In all cases, when possible, video starts automatically. In other cases, "Play" button will be displayed. For example, on mobile devices, in most cases, user action is required to run the video.

Recommendations
Here are the tips that will help your ads match new IAB Russia recommendations on quality advertising:
- always show "Close" button without delay (use value 0);
- sound should be turned off by default, when video playback starts.

HTML code requirements (for code developers)

To prepare a project with HTML5 creative, we recommend to use instructions for editors:
  Adobe Animate CC;
  Google Web Designer.

Video clip requirements

Acceptable video formats: formats that are supported by browsers. Recommended format mp4.
Maximum video clip that size that will be uploaded to the ADFOX interface is 1MB.

Custom control buttons requirements (turn sound on / off, close)

Acceptable image formats: png, gif, jpg.
Maximum dimensions 50х50px.

Event counting

Banner has the mechanism of event counting:

Start viewing
The video is selected (creativeView)
Uploaded (impression)
First quarter of viewing (firstQuartile)
Middle view (midpoint)
Third Quarter View (thirdQuartile)
Full view (complete)
Mute the sound (mute)
Enable sound (unmute)
Click on the close button
Error playing or initializing the banner (error)

Adding a banner to ADFOX

To add a banner to ADFOX, select banner type and template "Fullscreen HTML5 with video [loader]".

Specify parameters of the banner:

  1. Архив с HTML5 креативом (HTML5 creative archive) - upload *.zip with your project.

  2. Ссылка на промерочный пиксель (Tracking pixel link) - by default the ADFOX tracking pixel //banners.adfox.ru/transparent.gif is used, if it is necessary to record hits in a third-party system, delete ADFOX pixel and specify another link.

  3. URL перехода (Referrer URL) - specify the link to the advertiser's site. For correct operation of the transition, please check protocol in the link (http:// or https://).

  4. HTML5 (css, html, js) (HTML5 (css, html, js)) - contents of the .html code from the archive with the project (loads automatically from archive with creative). If there is no code, video will be played over gray background.

  5. Выключен звук на старте (yes/no) (If sound is off onstart) - specify sound settings when banner is loaded:
    yes - sound is off;
    no - sound is on.

  6. Формат видео рекламы (Video ad format) - specify format of advertisement:
    %global.linearAdVAST2% - if banner placement is taking place using video file.
    %global.WrapperAdVAST2% - if banner placement is taking place using VAST XML link.

  7. Видна ли кнопка звука (yes/no) (Sound button visibility (yes/no)) - specify visibility of "Turn sound on/off" button:
    yes - button is visible;
    no - button is hidden.

  8. Показывать таймер закрытия (yes/no) (Countdown timer visibility (yes/no))- select whether you want to show countdown timer not:
    yes - timer is visible. Specify "Banner display time (seconds)" option;
    no - hide timer.

  9. Текст на панели управления (Control panel text) - text on control panel, near timer. Default value is "Advertisement".

  10. Класс контейнера с баннером (Banner container class) — define class of the banner container. All significant child elements will get classes also will get classes according BEM methodology based on this parameter.

  11. Видео (URL) (Video (URL)) —- if banner placement is taking place using videofile, then upload video or specify link. It is not nesessary to specify link to VAST XML in this case. Be sure to specify "Video advertising format": %global.linearAdVAST2%.

  12. Ссылка на VAST XML (VAST XML link) —- link to VAST 2.0 XML container with video data. It is not nesessary to specify video file in this case.

  13. Задержка показа "Закрыть" (-1 - не показывать) сек ("Close" button appearance delay ("-1" - doesn't show at all)) - time between appearance of the banner and "Close" button display.

  14. Продолжительность видео (в формате "HH:MM:SS") (Videolength ("HH:MM:SS" format)) - length of the video "HH:MM:SS" (hours:minutes:seconds).

  15. MIME-type видео (например, video/mp4) (MIME-type (video/mp4 for example)) - video file MIME-type, for example "video/mp4". This parameter is mandatory when you use video file.

  16. Ширина видео (Video width) — video width in pixels (do not specify "px"). This parameter is mandatory when you use video file.

  17. Высота видео (Video height) — video height in pixels (do not specify "px"). This parameter is mandatory when you use video file.

  18. Показывать кнопку "Подробнее" (yes|no) (Show "Details" button (yes|no)) — select whether you want to show "Details" button or not
    yes - show button;
    no - hide button.

  19. Текст на кнопке "Подробнее" ("Details" button text) — specify text for "Details" button. If the parameter is empty, button will be shown. Default text is "Details".

  20. Стиль для кнопки "Подробнее" ("Details" button styles) - specify CSS styles for "Details" button. For example: "background-color: #f00; color: #fff; border-radius: 10px;".

  21. Собственная картинка кнопки "Закрыть" ("Close" button custom image) - upload image or provide link for "Close" button. Acceptable image formats: jpg, png, gif. Not larger than 50x50 pixels.

  22. Собственная картинка кнопки "Выключить звук" (Custom image for "Mute sound" button) - upload image or specify link for "Mute sound" button. JPG, PNG, GIF formats allowed, dimensions should not exceed 50x50 pixels.

  23. Собственная картинка кнопки "Включить звук" (Custom image for "Turn on sound" button) - upload image or specify link for "Mute sound" button. JPG, PNG, GIF formats allowed, dimensions should not exceed 50x50 pixels.

  24. Цвет таймера закрытия (Banner timer colour) - specify colour for countdown timer in CSS format. For example: #404994.