<!-- 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 x-data="{
	activeId: null,
	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'
	} ],
	get iframe() {
		return this.activeId ? `<iframe loading='lazy' width='560' height='315' src='https://www.youtube.com/embed/${this.activeId}?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.';
	}
}">
	<template x-if="embeds.length > 0">
		<ul>
			<template x-for="({ id, title }) in embeds">
				<li x-bind:class="activeId === id ? 'is-active' : ''">
					<a href="#" title="title" x-text="title" x-on:click.prevent="activeId = id"></a>
				</li>
			</template>
		</ul>
	</template>
	<template x-if="activeId">
		<div class="adwire-responsive" x-html="iframe"></div>
	</template>
	<template x-if="!activeId">
		<p>
			Pick one from above.
		</p>
	</template>
	<template x-if="activeId">
		<p>
			<button type="button" title="Reset" x-on:click.prevent="activeId = null">Reset</button>
		</p>
	</template>
</div>

@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 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;

		[...addedNodes].filter(({ tagName }) => tagName === "IFRAME").forEach(run);
	});
}).observe(document.body, {
	childList: true,
	subtree: true
});