Embed video player using code snippet
To embed Veedmo video player using manual JavaScript configuration you need to add, to your website, specially prepared JavaScript code snippet and manually set all configuration options in it.
JavaScript code snippet (sample)
Specially prepared JavaScript code snippet (mentioned below) can be added to website in various ways (e.g. via 3rd party frameworks, Google Tag Manager, ...); we recommend to inject it before closing </body> tag as it requires website's DOM (Document Object Model) to be loaded, so player could be injected in given (in configuration) query selector on page.
(function veedmoPlayer(j) {
(function veedmoEl() {
var elem = document.querySelector(j.query_selector);
if (elem) {
if (!window.veedmoLoad) {
window.veedmoLoad = [];
var script = document.createElement('script');
script.onload = function () {
for (var i = 0; i < window.veedmoLoad.length; i++) {
window.veedmoLoad[i]();
}
};
script.src = "//cdn.veedmo-static.com/cdn/player/v2/current.js";
document.body ? document.body.appendChild(script) : document.head.appendChild(script);
}
window.veedmo ? new window.veedmo().runManual(j) : window.veedmoLoad.push(function() { new window.veedmo().runManual(j); });
} else {
setTimeout(veedmoEl, 100);
}
})();
})({
"partner_id": UNIQUE_NUMERIC_PARTNER_ID,
"query_selector": "#element",
"insert_method": 0,
"autoplay": 3,
"muted": 1,
"ad_type": 1,
"video_url": "https://cdn.veedmo-static.com/cdn/samples/videos/sample-video-waves.mp4",
"video_title": "Sample video title",
"tag_url_desktop": "",
"tag_url_mobile": "",
"position": 3,
"responsive": 1,
"corner": "bl",
"vertical_margin": 20,
"horizontal_margin": 20,
"sticky": {
"desktop_width": "200",
"desktop_width_percent": "50",
"mobile_width": "120",
"mobile_height": "100",
"mobile_width_percent": "50",
"mobile_height_percent": "20",
}
});
Configuration parameters
Below there is a list of supported configuration parameters. * - mandatory parameter.
| Param | Description |
partner_id * | Unique numeric ID of Veedmo partner account. Contact us to obtain your partner account and partner_id. |
query_selector * | JavaScript querySelector (e.g. id, class name) of the page element to inject player into. IMPORTANT: do not use veedmo as your query selector name as it is system reserved name. |
video_url * | URL of video file. Mandatory, if ad_type is set to 1. Optional, if ad_type is set to 0. |
video_urls | Array of URLs of video files. Allows player to play video's playlist. Each video, after played, is remembered by web browser so viewer would always get fresh content from playlist (until playlist ends, then player resets it and plays videos as all would be fresh). Player config needs to have defined video_url or video_urls; when both are defined in player config, video_urls (playlist) has priority.Example: |
responsive * | Possible values: 1 - player will resize to the parent container width 2 - player will have fixed size (requires to set width param) |
ad_type | Possible values: 0 - outstream (in this case, there is no need to specify video_url param - can be empty)1 - instream (in this case, video_url param has to be set too) |
tag_url_desktop | URL(s) of ad tag(s), or pure XML(s) content of ad(s), to display on desktop devices. If empty, no ad(s) will be displayed on desktop devices. Handles single URL, or XML content of ad tag, or multiple URLs / XMLs content, via waterfall mechanism. To set up waterfall mechanism, pass array of objects, where each object contains ad tag URL / XML content, and a type (acceptable types are: vast - for VAST / VMAP ad tag URL(s), vpaid - for VPAID ad tag URL(s), vastxml - for ad XML(s) content).ad_schedule_desktop has priority over tag_url_desktop (if both are defined in config, which is not recommended or needed).Example: |
tag_url_mobile | URL(s) of ad tag(s), or pure XML(s) content of ad(s), to display on mobile devices. If empty, no ad(s) will be displayed on mobile devices. Handles single URL, or XML content of ad tag, or multiple URLs / XMLs content, via waterfall mechanism. To set up waterfall mechanism, pass array of objects, where each object contains ad tag URL / XML content, and a type (acceptable types are: vast - for VAST / VMAP ad tag URL(s), vpaid - for VPAID ad tag URL(s), vastxml - for ad XML(s) content).ad_schedule_mobile has priority over tag_url_mobile (if both are defined in config, which is not recommended or needed).Example: |
ad_schedule_desktop | Ads schedule to display on desktop devices. It's an array of objects (ad breaks). Each ad break can have single ad tag (URL or XML) or multiple ad tags, via waterfall mechanism. timeOffset defines time moment in which ad break should be executed; can have following values: start, end, MM:SS (time stamp, e.g. 01:55), XXX% (percentage of video length, e.g. 50%).ad_schedule_desktop has priority over tag_url_desktop (if both are defined in config, which is not recommended or needed).Example: |
ad_schedule_mobile | Ads schedule to display on mobile devices. It's an array of objects (ad breaks). Each ad break can have single ad tag (URL or XML) or multiple ad tags, via waterfall mechanism. timeOffset defines time moment in which ad break should be executed; can have following values: start, end, MM:SS (time stamp, e.g. 01:55), XXX% (percentage of video length, e.g. 50%).ad_schedule_mobile has priority over tag_url_mobile (if both are defined in config, which is not recommended or needed).Example: |
insert_method | Possible values: 0 - inject player inside "query_selector" target element (appendChild) 1 - inject player before "query_selector" target element (beforebegin) 2 - inject player inside "query_selector" target element, after its last child (beforeend) 3 - inject player inside "query_selector" target element, before its first child (afterbegin) 4 - inject player after "query_selector" target element (afterend) If not defined, 0 (appendChild) will be used. |
autoplay | Possible values: 1 - autoplay off 2 - autoplay on 3 - autoplay starts when min. 50% of player height is in browser's viewport If not defined, 1 (autoplay off) will be used. |
muted | Possible values: 0 - muted off 1 - muted on If not defined, 0 (muted off) will be used. Recommended setting: 1 (as browser tend to block unmuted videos when trying to autoplay). |
video_title | Title of video added in video_url param. By default it's empty. |
video_description | Description of video added in video_url param. By default it's empty. |
video_poster | URL of video's poster image (shown in player before video starts to play). By default it's empty. |
width | Player width, in pixels (px). Required only if responsive is set to 2. |
position | Possible values: 1 - player will appear in page content 2 - player (floating) will appear in corner of the screen (corner defined in corner param)3 - player will appear in page content, and switch to floating mode when min. 50% of player height will be out of browser's viewport (floating mode screen corner is defined in corner param)If not defined, 1 (in page content) will be used. Recommended setting: 3 (to maximize viewability). |
corner | Corner of the screen in which floating player will appear. Required only if position is set to 2 or 3.Possible values: bl - bottom left corner of the screen br - bottom right corner of the screen tl - top left corner of the screen tr - top right corner of the screen If not defined, br (bottom right) will be used. |
vertical_margin | Floating player distance from top / bottom (depending on set corner param value) edge of the screen, in pixels (px). Required only if position is set to 2 or 3.If not defined, 20 (20px) will be used. |
horizontal_margin | Floating player distance from left / right (depending on set corner param value) edge of the screen, in pixels (px). Required only if position is set to 2 or 3.If not defined, 20 (20px) will be used. |
sticky | Floating player size on desktop and mobile. If both, absolute and percentage parameters are present in config, absolute parameters values overrides percentage parameters values. Example: |
aspect_ratio | Player's aspect ratio. Possible values: 16:9 4:3 1:1 9:16 If not defined, player will use video's aspect ratio and scale automatically to it. |
block_if_adblock | Player behaviour when adblock is detected in browser, and tag_url_desktop or tag_url_mobile are set.Possible values: 0 - play video despite blocked ad 1 - block video and display custom message in player (message defined in adblock_message param)If not defined, 1 (block video) will be used. |
adblock_message | Custom message content to display in player, if adblock was detected and enabled. If not defined, To watch this video please disable your adblock. will be used. |
close_btn_time_offset | Time after which X button will appear in floating player, in milliseconds (ms). Required only if position is set to 2 or 3, or ad_type is set to 0.If not defined, 3000 (3sec) will be used. |
close_btn_skip_ad | To maximize ad impressions, X button (closing player's floating mode - when position is set to 2 or 3) can be used to skip ads (or ad pods) instead of direcly closing floating mode (and decreasing chances to more ad impressions).Possible values: 0 - do not skip ads (or ad pods) on click in X button (floating mode) 1 - skip ads (or ad pods) on click in X button (floating mode) If not defined, 0 (do not skip ads on clicks in X button) will be used. |
ad_empty_autoplay | Autoplay behaviour (on / off) depending on ad status. Possible values: 0 - autoplay will start only if ad returned by ad server was not empty, or there was no ad error 1 - autoplay will start always If not defined, 1 (start always) will be used. Recommended setting: 0 (to maximize ad viewability, and not use data transfer when visitor cannot be monetized). |
ad_empty_hide_player | Player show / hide behaviour depending on ad status. Possible values: 0 - player will always appear on page 1 - player will appear on page only if ad returned by ad server was not empty, or there was no ad error If not defined, 0 (appear always) will be used. Recommended setting: 0 (to avoid page content jumping). |
ad_empty_or_played_disable_sticky | Floating mode (position set to 3) behaviour depending on ad status.Possible values: 0 - player will always switch to floating mode 1 - player will switch to floating mode: - if ad returned by ad server was not empty, or there was no ad error - until last ad returned by ad server, has finished to play If not defined, 0 (always switch to floating mode) will be used. Recommended setting: 1 (to maximize ad viewability, and not annoy visitor). |
ad_empty_callback | Callback funtion called when no pre-roll ad will be returned by ad server, or visitor has ad block enabled and ad cannot be obtained from ad server. If both, ad_empty_callback and ad_empty_player are defined, ad_empty_player has priority, and launches as first.Example: |
ad_empty_player | Fallback called when no pre-roll ad will be returned by ad server, allowing to load alternative player config (e.g. if instream ad won't be returned by ad server, fallback to outstream ad). If both, ad_empty_callback and ad_empty_player are defined, ad_empty_player has priority, and launches as first.Example (fallback instream to outstream): |
enable_sticky_on_outside_viewport | Floating mode (position set to 3) behaviour depending on ad status and player visibility in viewport.Possible values: 0 - player will switch to floating mode after page visitor will pass it, while scrolling the page 1 - player will switch to floating mode after page visitor will pass it, while scrolling the page, and additionally straight after player was loaded on page (only if player was loaded on page out of viewport) If not defined, 0 (switch to floating mode after page visitor will pass player, while scrolling the page) will be used. Recommended setting: 1 (to maximize ad viewability). |
block_playback_outside_viewport | Playback status depending on player visibility to the page visitor. Possible values: 0 - do not pause playback when player is not visible to the visitor 1 - pause playback, when player is not visible to the visitor (auto resume playback when player is visible to the visitor) If not defined, 1 (pause playback, when player is not visible to the visitor) will be used. Recommended setting: 1 (to not hurt CPMs and ad revenue). |
consent_string_timeout | Delays player load to wait for page visitor to accept page's privacy policies, in seconds. If not defined, player on load (before requesting ad) will check (for 5 seconds) page visitor's privacy policies consent status and use it when requesting ad. |
seo_metadata | Adds video schema markup, based on VideoObject schema, to make search engines better aware of the type of content you have on your website. Added markup data are: name, duration, description, contentUrl, thumbnailUrl.Possible values: 0 - do not add video schema markup to the player 1 - add video schema markup to the player If not defined, 0 (do not add video schema markup) will be used. |
branding | Customizable player branding. Branding can appear in two forms:corner - 20px height (max. 70px width) clickable image in top right corner of player (appears only on paused/finished video)bar - 16px height bar (with 10px height image) on bottom of player (appears always, when configured - hidden by default)corner and bar are objects, with 3 configurable parameters each:text - text which will appear (on hover of corner image, or on bottom bar) link - URL which will be opened on click on text set in text or / and imageimage - URL of image (formats: *.jpg, *.png, *.svg) which will appear in corner, or on bar (after the text) If not defined, only Powered by Veedmo will appear in top right corner of player. |
Macros
| Macro | Description |
$$WIDTH$$ | Numeric value. Returns player width, in pixels. |
$$HEIGHT$$ | Numeric value. Returns player height, in pixels. |
$$REFERER$$ | Returns hostname and path of website, where player is embedded (e.g. domain.com/news/article). |
$$REFERER_DOMAIN$$ | Returns hostname of website, where player is embedded (e.g. domain.com). |
$$GDPR$$ | Passes information about GDPR status on website: 0 - GDPR not required 1 - GDPR required Used in pair with the $$GDPR_CONSENT$$ macro. IMPORTANT: IAB’s GDPR Transparency & Consent Framework must be implemented on website for this to work. |
$$GDPR_CONSENT$$ | Passes GDPR consent string content, only when GDPR is required (defined by $$GDPR$$ macro). If GDPR is not required, value is not set. Used in pair with the $$GDPR$$ macro. IMPORTANT: IAB’s GDPR Transparency & Consent Framework must be implemented on website for this to work. |
Live example
Below there is an the example showing how Veedmo video player can be embedded on page using manual JavaScript configuration. Click on "Result" tab to see the result.