All ad management is done over at vastvids. In order to complete integration you would need to create a vastvids account to recieve API keys. Once you recieve your API keys you may continue with this integration. You will also recieve analytics and payouts over at vastvids.
Users will get paid $0.03 for every ad view they recieve. Ad views are only counted when a video ad plays to the end. All ads are skippable ads.
include the following code in your html head tag.
<head>
<!-- css -->
<link rel='stylesheet' type="text/css" href="https://vastvids.com/static/base/style_video_player.css">
<!-- font awesome -->
<script src="https://kit.fontawesome.com/68a3603f09.js" crossorigin="anonymous"></script>
<!-- google fonts & icons -->
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<link href="//fonts.googleapis.com/css?family=Open+Sans:300,400,600,700&subset=latin" rel="stylesheet">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
<!-- jquery & media queries -->
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0">
</head>
Include the following code in your html body. Set the values of the chance_of_ad & apiKey. Your apiKey is found in your Settings > Admin Dashboard > Account > API Credentials over at vastvids.
<body>
<div class="video-player-sdk" style="width: 300px; height: 250px;">
<div class="vp-container show-controls">
<video class="vp-video" poster="" playsinline autoplay muted>
<source src="" type="video/mp4">
<source src="" type="video/ogg">
<!-- the span tags with the class .vastvids-resolutions lets us know to check the data attributes for the resolution & its url to pair the two in the resolutions option -->
<!-- Any url in the span data attribute that matches the video's first <source> tag src, is the url that will be given an #active id and a darkened color-hex in the resolution pop-up options. -->
<span class="vastvids-resolutions" data-vastvids-resolution="Default" data-vastvids-resolution-url="https://www.video_url.com"></span>
<span class="vastvids-resolutions" data-vastvids-resolution="720p" data-vastvids-resolution-url="{{ https://www.video_url_720.com"></span>
</video>
</div>
</div>
<script type="text/javascript">
// yor api key (case sensitive)
var apiKey = ""
// the chance of an ad playing. 0.17 = 17% chance of an ad playing
// value should be between 1.00 & 0.00
var chance_of_ad = 0.17
// (optional) In certain scenarios such as using autoplay & muted to bypass ios restrictions
// you can use this variable to enable a video to be unmuted the first time it's clicked
var firstClickUnmute = true
</script>
<!-- must be at button of other SDK code -->
<script type="text/javascript" src="https://vastvids.com/static/javascript/video_player_ad_support.js"></script>
</body>
You can also customize the colors of the video player to match your color scheme.
<head>
<style>
.vp-container .speed-options li:hover{
background: #dfdfdf; /* video speed options background-color */
}
.vp-container .speed-options li.active{
color: #fff; /* video speed options text color*/
background: #961396; /* video speed options background-color */
}
.vp-container .progress-area .progress-bar{
background: #961396; /* video progress bar background-color */
}
:root {
--check-secondary: #961396; /* video progress bar time-keeping circle background-color */
}
.vp-container .loader{
border: 6px solid #f3f3f3; /* the color of the buffer icon */
border-top: 6px solid #3498db; /* the spinning part of the buffer icon */
}
</style>
</head>
If your using ajax to load new video players, you will need to call the load_vastvp_js_ad() function to refresh the video players javascript. Just include the following script in the HTML page that is being loaded through ajax.
<body>
<script type="text/javascript">
load_vastvp_js_ad();
</script>
</body>
There you go! your set to go.