plyr with vast ads

index.html

<div class="container">  
	<video controls crossorigin playsinline poster="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.jpg">
		 <source src="https://livestream.knowtable.xyz:5443/show/streams/show.m3u8" type="application/x-mpegURL" size="720">
			<source src="https://livestream.knowtable.xyz:5443/show/streams/show.m3u8" type="application/x-mpegURL" size="480">

			
			<!-- Fallback for browsers that don't support the <video> element -->
	
</div>
<!-- Plyr resources and browser polyfills are specified in the pen settings -->
  

plyr-with-vast-ads.markdown

plyr with vast ads

A Pen by chandan688 on CodePen.

License.

script.js

// Change the second argument to your options:
// https://github.com/sampotts/plyr/#options
const player = new Plyr('video',  {captions: {active: true}, ads: {enabled: true, tagUrl: 'https://pubads.g.doubleclick.net/gampad/ads?sz=640x480&iu=/124319096/external/single_ad_samples&ciu_szs=300x250&impl=s&gdfp_req=1&env=vp&output=vast&unviewed_position_start=1&cust_params=deployment%3Ddevsite%26sample_ct%3Dskippablelinear&correlator='}});

// Expose player so it can be used from the console
window.player = player;

style.css

html,
body,
#container {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    background: #000;
    color: #fff;
    overflow: hidden;
}

#container {
    position: absolute;
    text-align: center
}

video {
    outline: 0
}

.container {
	margin: 50px auto;
	max-width: 600px;
}