<!-- 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 id="vue-app"></div>

<script type="text/x-template" id="app-x-template">
	<ul v-if="embeds.length > 0">
		<li v-for="embed in embeds" v-bind:class="{ 'is-active' : embed.id === activeId }">
			<a href="#" v-bind:title="embed.title" v-on:click.prevent="activeId = embed.id">{{ embed.title }}</a>
		</li>
	</ul>
	<div v-if="activeId" class="adwire-responsive" v-html="iframe"></div>
	<p>
		<template v-if="!activeId">
			Pick one from above.
		</template>
		<button v-else type="button" title="Reset" v-on:click.prevent="activeId = null">Reset</button>
	</p>
</script>

@charset "utf-8";

body {
	padding: 0;
	margin: 1rem auto;
}

p {
	margin: 1rem;
}

.is-active::before {
	content: "\2023";
	color: palegreen;
}

.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 VueApp = {
	template: "#app-x-template",
	setup() {
		const embeds = [
			{
				id: "R6MlUcmOul8",
				title: "Tears of Steel - Blender VFX Open Movie"
			},
			{
				id: "aqz-KE-bpKQ",
				title: "Big Buck Bunny 60fps 4K - Official Blender Foundation Short Film"
			},
			{
				id: "eRsGyueVLvQ",
				title: "Sintel - Open Movie by Blender Foundation"
			},
			{
				id: "WhWc3b3KhnY",
				title: "Spring - Blender Open Movie"
			}
		];

		const activeId = Vue.ref();

		const iframe = Vue.computed(() =>
			activeId.value
				? `<iframe loading="lazy" width="560" height="315" src="https://www.youtube.com/embed/${activeId.value}?mute=1" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen referrerpolicy="no-referrer"></iframe>`
				: "Iframe error."
		);

		return {
			embeds,
			activeId,
			iframe
		};
	}
};

Vue.createApp(VueApp).mount("#vue-app");

const options = {
	adTagUrl: AD_TAG_URL,
	cookies: true,
	mode: Adwire.Mode.INSTREAM_IFRAME_YOUTUBE,
	private: true,
	terms: true
};

const adwire = new Adwire(options);
const run = (iframe) => adwire.run(iframe);

new MutationObserver((mutations) => {
	mutations.forEach(({ type, addedNodes }) => {
		if (type !== "childList") return;

		const iframes = [...addedNodes].filter(({ tagName }) => tagName === "IFRAME");
		const childIframes = [...addedNodes]
			.filter(({ tagName }) => tagName !== "IFRAME")
			.map((node) =>
				node.getElementsByTagName ? [...node.getElementsByTagName("iframe")] : []
			)
			.flat()
			.filter((node) => node);

		[...iframes, ...childIframes].forEach(run);
	});
}).observe(document.body, {
	childList: true,
	subtree: true
});