Documentation


Dependencies

							



							
						

Initialization

							
// define adwire configuration
const options = { /* adwire options - see below */ };

// define adwire plugin for obtaining adwire API - see below
const plugin = api => console.log("Got adwire API!", api);

// define target element - see below
const target = document.querySelector("iframe[src]");

// initialize adwire
const adwire = new Adwire(options);

// use adwire plugin
adwire.use(plugin);

// run adwire
adwire.run(target);
							
						

Options

Option Description
adTagUrl string | Promise<string> AdTag URL to load VAST, VPAID, VMAP or SIMID from.
adTitle boolean | string | Promise<string> Enables display of ad title in controls bar. Can be also set to custom text.
autoplay boolean Sets setAdWillAutoPlay and setAutoPlayAdBreaks in Google IMA SDK. This option doesn't contain any autoplay functionality. You can implement it yourself according to autoplay example.
class string | Array<string> Sets custom player class. If not set, player will inherit class from iframe.
clone boolean Clones iframe, so no other modifications can be made to it via already existing references while adwire is active.
cookies boolean Sets setCookiesEnabled in Google IMA SDK and enables cookies for storing volume level and response from licensing server for faster license validation (not available in BETA). You are obliged to obtain valid consent from your users, before setting this to true.
height number Sets custom player height. If not set, player will inherit height from iframe.
locale string Sets setLocale in Google IMA SDK. Supported locale country codes can be found here.
mode one of Adwire.Mode constants Predefined modes for player. Use mode reference only from Adwire class. Do not use string representation of mode, it might be subject of change in future. Available modes: console.log(Adwire.Mode)
muted boolean Sets setAdWillPlayMuted in Google IMA SDK and starts player muted. This option doesn't mute YouTube video. You can implement it yourself by setting mute parameter in iframe source URL.
poster string Sets custom poster. Shorthand options for YouTube: sd, mq, hq and maxres.
private boolean Sets referrer policy to no-referrer on iframe and forces enhanced-privacy mode for YouTube.
terms boolean You are obliged to read and accept adwire terms.
timeout number Timeout in millisecond. Sets vastLoadTimeout, loadVideoTimeout in Google IMA SDK and for adwire license check.
width number Sets custom player width. If not set, player will inherit width from iframe.

Methods

Method Description
run (target: HTMLElement) => void Runs adwire on single iframe or container.
use ((api: AdwireApi | undefined, ...parameters: Array<unknown>) => void, ...parameters: Array<unknown>) => Adwire Plugin function is called after adwire was initialized. Passes adwire API as first parameter and transfers other parameters.

API

Property Description
externalId string | undefined External ID of embed.
externalUrl string | undefined External URL of embed.
id string ID of adwire player instance.
Method Description
isMuted () => boolean Checks if video is muted.
isPlaying () => boolean Checks if video is playing.
mute () => void Mutes video. / Sets volume to 0%.
on (type: string, listener: (event: AdEvent | AdErrorEvent) => void) => () => void Adds event listener for ad events. Passes AdEvent or AdErrorEvent as first parameter. Returns cancel function. Available events: console.log(google?.ima?.AdEvent?.Type, google?.ima?.AdErrorEvent?.Type).
once (type: string, listener: (event: AdEvent | AdErrorEvent) => void) => () => void Adds event listener for ad event only once. Passes AdEvent or AdErrorEvent as first parameter. Returns cancel function. Available events: console.log(google?.ima?.AdEvent?.Type, google?.ima?.AdErrorEvent?.Type).
pause () => void Stops video.
play () => void Resumes video.
unmute () => void Unmutes video. / Sets volume to 100%.

Modes

Mode Description
INSTREAM_IFRAME General iframe option, no modifications are made to target iframe.
INSTREAM_IFRAME_DAILYMOTION Optimized for Dailymotion, sets autoplay option.
INSTREAM_IFRAME_TWITCH Optimized for Twitch, sets autoplay option.
INSTREAM_IFRAME_VIMEO Optimized for Vimeo, sets autoplay option.
INSTREAM_IFRAME_YOUTUBE Optimized for YouTube, sets autoplay option and default poster option.
OUTSTREAM General outstream option.

CSS variables

Variable Default value
--adwire-play-button-background-color rgba(0, 0, 0, 0.8)
--adwire-play-button-background-color-on-hover #ff4500
--adwire-play-button-fill-color #eee
--adwire-play-button-fill-color-on-hover #fff
--adwire-progress-bar-background-color rgba(0, 0, 0, 0.2)
--adwire-progress-bar-fill-color #ffd700
--adwire-controls-bar-background-color rgba(0, 0, 0, 0.8)
--adwire-controls-bar-button-fill-color #eee
--adwire-controls-bar-button-fill-color-on-hover #fff
--adwire-controls-bar-text-color #eee
--adwire-controls-bar-ad-tag-background-color #ffd700
--adwire-controls-bar-ad-tag-text-color #111
--adwire-controls-bar-ad-tag-text-content "ad"

If you have any suggestion, feature request, idea or found a bug, please reach me at feedback@adwire.dev.