YouTube

This component allows you to easily embed Youtube videos in a much more performant way.

When using the standard Youtube embed code, around 500kb of code is downloaded and executed whether the user views the video or not. The Youtube component defers this process so it only happens if the user clicks explicitly to start the video.

Source

Contributors

Overview
Options
Methods
Events

Base

<div class="c-youtube" data-youtube-id="MtN1YnoL46Q">
	<div class="c-youtube__inner">
		<img loading="lazy" data-lazy-src="http://img.youtube.com/vi/MtN1YnoL46Q/hqdefault.jpg" alt='Youtube Video' class="c-youtube__preview" />
		<svg class="c-youtube__play u-theme-primary"><use xlink:href="/static/img/evotoolkit-059f9bb4f6.svg#circle-play" /></svg>
	</div>
</div>

You can modify the youtube component by overriding certain JavaScript functionality through HTML data-attributes.

JavaScript

You can modify youtube component functionality by adding the below data attribute. Unless stated otherwise, these must be placed on the top level block component (eg:- c-calendar)

Name
Name	`data-youtube-id`
Description
Description	This is a required attribute, and must contain the ID of the Youtube video you wish to display. You can grab this from the standard embed code, or from the URL of the YouTube video itself. For example, for `https://www.youtube.com/watch?v=6joOVjEemh4`, the id would be `6joOVjEemh4`.
Default

This component has methods which allow you to programatically trigger actions. You can trigger these using the evo() selector.

See JavaScript API for more information and a list of shared, global methods.

YouTube Player API

You can access the YouTube player API object by retrieving the component's state using the getState method.


												// Would stop the video
evo('.c-youtube').youtube('getState').videoObj.playVideo();

// Would stop the video
evo('.c-youtube').youtube('getState').videoObj.stopVideo();

// Would mute the video
evo('.c-youtube').youtube('getState').videoObj.muteVideo();

// Would load a new video (https://www.youtube.com/watch?v=6joOVjEemh4 in the existing player)
evo('.c-youtube').youtube('getState').videoObj.loadVideoById('6joOVjEemh4');

// More methods here: https://developers.google.com/youtube/iframe_api_reference

This component has bespoke events which trigger automatically on certain actions. You can hook into these using event listeners to run your own custom code.

Typically, most events are fired from the block level class (eg:- c-tabs), however some may fire from element level classes (eg:- c-tabs__item). In practice, this usually doesn't matter as these element level events will bubble upwards and trigger any listeners on the block element. When this happens, you can get a reference to the element via the target property of the event object.

Events List

Name	Description
`play`	Fires when the user plays the video.
`pause`	Fires when the user pauses the video.
`end`	Fires when the video ends.

Example code snippet showing how you can set up an event listener.


const element = document.querySelector('.c-my-component');
element.addEventListener('eventName', (e) => {
	console.log('my event has fired');
	// Access event details object, if it exists
	console.log(e.details);
	// Access the element the event was fired from
	console.log(e.target);
});