DOCS - Veedmo instream video player embed example
by veedmo
HTML
<!DOCTYPE html>
<html>
<head>
<title>Veedmo video player embed example</title>
</head>
<body>
<!-- DIV into which Veedmo player will be injected; DIV's class name is passed in "query_selector" param of player config. -->
<div class="embedded-video-player"></div>
<!-- Veedmo script, injecting the player with configuration, in page. -->
<script>
(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": 1,
"query_selector": ".embedded-video-player",
"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": "Ocean waves in summer",
"video_description": "There are a few types of ocean waves and they are generally classified by the energy source that creates them.",
"video_poster": "https://cdn.veedmo-static.com/cdn/samples/images/sample-video-poster-wall.jpg",
"tag_url_desktop": "https://cdn.veedmo-static.com/cdn/samples/ads/player-dev-ads/vast-preroll-skip.xml",
...
CSS
body {
font-family: "Roboto", Helvetica, Arial, sans-serif;
font-weight: 400;
font-style: normal;
font-size: 1rem;
letter-spacing: 0.03rem;
line-height: 1.6;
background-color: #eeeeee;
padding: 10px;
height: 3000px;
}
.embedded-video-player {
max-width: 500px;
width: 100%;
}