<!-- 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. -->

<h1>Lorem Ipsum</h1>

<p>
	Lorem ipsum dolor sit amet consectetur, adipisicing elit. Dolor illum voluptas inventore assumenda? Dolorem explicabo excepturi aperiam deserunt quas! Earum aspernatur provident quisquam quia ad amet! Nemo magni accusamus temporibus.
</p>

<p>
	Quae enim minus dolore fugiat vel, nostrum vero magni distinctio cumque inventore omnis saepe? Ratione deleniti magni possimus error earum neque perferendis, sequi mollitia ducimus quasi eligendi illo impedit asperiores.
</p>

<p>
	Accusamus soluta voluptas exercitationem ea vel dolor sed recusandae sapiente iure totam veritatis distinctio, quam aut, repellendus ipsam repellat voluptatem inventore et voluptatibus asperiores minima tenetur, reiciendis perspiciatis. Sed, cumque.
</p>

<div class="adwire-responsive">
	<iframe loading="lazy" width="560" height="315" src="https://www.youtube.com/embed/R6MlUcmOul8?mute=1" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen referrerpolicy="no-referrer"></iframe>
</div>

<p>
	Veritatis libero quam dicta doloremque laudantium officiis magnam, fugiat quaerat nam ratione. Delectus voluptatem voluptas fugiat, commodi ad esse iusto aut reiciendis ea obcaecati aspernatur laudantium adipisci earum cum iure!
</p>

<p>
	Totam ratione quod voluptatibus aut non perferendis quaerat dignissimos odio accusamus id. Laborum, illo neque molestiae consectetur cumque at vel dignissimos eaque earum temporibus asperiores eius enim commodi repellat voluptates.
</p>

<p>
	Adipisci eius impedit architecto laudantium sit, obcaecati expedita exercitationem totam sapiente repellendus voluptates, unde quia accusantium! Autem nisi aspernatur debitis, iste, blanditiis dolore aliquam mollitia molestias pariatur veniam illum delectus!
</p>

@charset "utf-8";

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

.adwire-responsive > iframe, /* original YouTube iframe */
.adwire-responsive .adwire-iframe,
.adwire-responsive .adwire {
	position: absolute;
}

.adwire-responsive > iframe, /* original YouTube iframe */
.adwire-responsive .adwire-iframe,
.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%3Dskippablelinear&correlator=";

const plugin = (api) => {
	new IntersectionObserver(
		(entries) => {
			entries.forEach(({ isIntersecting }) => {
				api[isIntersecting && !api.isPlaying() ? "play" : "pause"]();
			});
		},
		{
			threshold: 0.75
		}
	).observe(document.getElementById(api.id));
};

new Adwire({
	adTagUrl: AD_TAG_URL,
	autoplay: true,
	cookies: true,
	mode: Adwire.Mode.INSTREAM_IFRAME_YOUTUBE,
	muted: true,
	private: true,
	terms: true
})
	.use(plugin)
	.run(document.querySelector("iframe[src^='https://www.youtube.com/embed/']"));