<!-- 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">
	<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>
@charset "utf-8";

.adwire-poster .adwire-button {
	overflow: hidden;
	position: relative;
	z-index: 1;
}

.adwire-poster .adwire-button::before,
.adwire-controls-bar {
	background: linear-gradient(135deg, deeppink, orangered);
}

.adwire-poster .adwire-button::before {
	content: "";
	width: 100%;
	height: 100%;
	opacity: 0;
	position: absolute;
	top: 0;
	left: 0;
	transition: opacity 0.25s ease-in-out;
	z-index: -1;
}

.adwire-poster:hover .adwire-button::before {
	opacity: 1;
}

.adwire-controls-bar .adwire-remaining-time:before {
	display: none;
}

.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=";

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

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css
  2. https://cdn.adwire.dev/latest/adwire.min.css

External JavaScript

  1. https://imasdk.googleapis.com/js/sdkloader/ima3.js
  2. https://cdn.adwire.dev/latest/adwire.min.js