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" |