Default

V237-00

Dit is de standaard layout van de youtube partial.

Hoe te gebruiken?

Voeg de youtube tag toe aan het template.
<nc-youtube></nc-youtube>

Voorvertoning

Alvast beginnen met een basis opmaak?

Neem de onderstaande code over in de website om alvast met een basis opmaak te beginnen.
CSS
/* Ronde hoeken toevoegen */
[data-partial="youtube"] .youtube-preloader-image {
	border-radius: var(--panel-radius);
}


/* Kopieer dit voor een mute knop over de video: /*
/* Let op de ".over-ons-header" selector, dit is de parent div */

/* [HEADER VIDEO - SOUND] */

.sound-toggle {
	cursor: pointer;
	position: relative;
}

.sound-toggle .sound-icon {
	left: 15px;
	bottom: 22px;
	background-color: var(--primary);
	aspect-ratio: 1;
	width: 65px;
	border-radius: 100%;
	transition: 200ms cubic-bezier(.46, .23, .43, 1);
	color: white;
}

.sound-toggle .sound-icon::before {
	content: "\f6a8";
	font-family: 'Font Awesome 6 Pro';
	font-weight: 700;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	position: absolute;
	font-size: 22px;
}

.sound-toggle .sound-icon::after {
	content: "";
	width: 0;
	background-color: white;
	height: 4px;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%) rotate(-45deg);
	transition: 200ms cubic-bezier(.46, .23, .43, 1);
}

.sound-toggle.muted .sound-icon::after {
	width: 60%;
}

.sound-toggle:hover .sound-icon {
	background-color: var(--secondary);
}

.over-ons-header.sound-toggle div[data-partial="youtube"] {
	pointer-events: none;
}

.sound-text {
	bottom: 40px;
	left: 95px;
	color: white;
	font-family: var(--font-family-sans-serif);
	pointer-events: none;
	font-size: 20px;
	font-weight: 700;
	text-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
}

@media screen and (min-width: 992px) {
	.sound-toggle .sound-icon {
		left: 60px;
		bottom: 40px;
		width: 75px;
	}

	.sound-text {
		bottom: 55px;
		left: 150px;
		font-size: 30px;
	}

	.sound-toggle .sound-icon::before {
		font-size: 24px;
	}
}
JS
// Kopieer dit voor een mute knop over de video:
// Let op de ".over-ons-header" selector, dit is de parent div 

onComplete(function () {
	// Videoheader Geluid Toggle
	const presetDiv = document.querySelector('.over-ons-header');
	const videoDiv = document.querySelector('.over-ons-header div[data-partial="youtube"]');
	const videoVid = document.querySelector('.over-ons-header div[data-partial="youtube"] video');

	if (!presetDiv || !videoDiv || !videoVid) return;

	let soundIconDiv = null;
	let soundTextDiv = null;
	let clickHandler = null;

	function setup() {
		if (presetDiv.classList.contains('sound-toggle')) return;

		presetDiv.classList.add('sound-toggle');
		presetDiv.classList.add('muted');

		soundIconDiv = document.createElement('div');
		soundIconDiv.classList.add('sound-icon', 'position-absolute');
		videoDiv.appendChild(soundIconDiv);

		soundTextDiv = document.createElement('div');
		soundTextDiv.classList.add('sound-text', 'position-absolute');
		const lang = document.documentElement.lang || '';
		// Support English and a default (NL) language.
		soundTextDiv.textContent = lang.toLowerCase().startsWith('en')
			? "Listen to our story!"
			: "Luister naar ons verhaal!";
		presetDiv.appendChild(soundTextDiv);

		videoVid.setAttribute('autoplay', 'true');
		videoVid.setAttribute('loop', 'true');

		clickHandler = () => {
			if (presetDiv.classList.contains('muted')) {
				videoVid.muted = false;
				presetDiv.classList.remove('muted');
			} else {
				videoVid.muted = true;
				presetDiv.classList.add('muted');
			}
		};
		presetDiv.addEventListener('click', clickHandler);
	}

	function teardown() {
		if (!presetDiv.classList.contains('sound-toggle')) return;

		if (clickHandler) {
			presetDiv.removeEventListener('click', clickHandler);
			clickHandler = null;
		}

		presetDiv.classList.remove('sound-toggle');
		presetDiv.classList.remove('muted');

		if (soundIconDiv) {
			soundIconDiv.remove();
			soundIconDiv = null;
		}
		if (soundTextDiv) {
			soundTextDiv.remove();
			soundTextDiv = null;
		}

		videoVid.removeAttribute('autoplay');
		videoVid.removeAttribute('loop');
		videoVid.muted = true;
	}

	function apply() {
		if (document.body.dataset.editorMode === 'content') {
			teardown();
		} else {
			setup();
		}
	}

	apply();

	new MutationObserver(apply).observe(document.body, {
		attributes: true,
		attributeFilter: ['data-editor-mode'],
	});

});