<!-- Notice: Codepen requires YouTube embed/video to be muted if using autoplay which adwire adds automatically for seamless user experience. This won't be required on your website. -->

<div class="adwire-responsive">
	<div class="adwire-placeholder">
		ad placeholder
	</div>
</div>

@charset "utf-8";

.adwire-placeholder {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	width: 560px;
	height: 315px;
	background-color: darkgray;
	color: dimgray;
	font-family: sans-serif;
	font-size: 2.5rem;
	font-weight: 300;
	user-select: none;
}

.adwire-responsive {
	position: relative;
	padding-bottom: 56.25%;
}

.adwire-responsive .adwire-placeholder,
.adwire-responsive .adwire {
	position: absolute;
}

.adwire-responsive .adwire-placeholder,
.adwire-responsive .adwire,
.adwire-responsive .adwire .adwire-ad,
.adwire-responsive .adwire .adwire-ad > *,
.adwire-responsive .adwire .adwire-ad iframe,
.adwire-responsive .adwire .adwire-ad video {
	width: 100% !important;
	height: 100% !important;
}

"use strict";

const AD_TAG_URL =
	"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%3Dlinear&correlator=";

const plugin = ({ play }) => play();

new Adwire({
	adTagUrl: AD_TAG_URL,
	autoplay: true,
	cookies: true,
	height: 315,
	mode: Adwire.Mode.OUTSTREAM,
	muted: true,
	terms: true,
	width: 560
})
	.use(plugin)
	.run(document.querySelector(".adwire-placeholder"));