Skip to content

Instantly share code, notes, and snippets.

@Niq1982
Last active July 28, 2023 11:32
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save Niq1982/08592548b23f58885c074b4816ec93d1 to your computer and use it in GitHub Desktop.
Save Niq1982/08592548b23f58885c074b4816ec93d1 to your computer and use it in GitHub Desktop.
Load Youtube videos using iFrame API
import ytPlayer from './ytplayer.js';
// Find players from DOM and load if found
const players = document.querySelectorAll('.youtube-player');
players.forEach(player => new ytPlayer(player, {
height: player.dataset.height ? player.dataset.height : 1280,
width: player.dataset.width ? player.dataset.width : 780,
autoplay: player.dataset.autoplay ? player.dataset.autoplay : false,
videoId: player.dataset.videoId ? player.dataset.videoId : false,
}));
<button id="play-YVZMqr2pXQk" type="button">Play</button>
<div class="youtube-player" data-video-id='YVZMqr2pXQk' data-play-button="play-YVZMqr2pXQk">
</div>
<button id="play-36qTU4hScco" type="button">Play</button>
<div class="youtube-player" data-video-id='36qTU4hScco' data-play-button="play-36qTU4hScco">
</div>
/**
* A simple library to load Youtube video's and play them.
*
* Automatically loads the Youtube API
* @param {*} target The target element for the video
* @param {*} args Video args
*/
export default function init(target, args) {
// Create event for api being ready and make a listerer for it
const APIReadyEvent = new Event("youtube-api-ready");
window.addEventListener("youtube-api-ready", (e) => loadPlayer(target, args));
// The callback function for Youtube iFrame API
window.onYouTubeIframeAPIReady = () => window.dispatchEvent(APIReadyEvent);
// Check if we loaded the API script already
if (!window.isYouTubeIframeAPILoaded) {
// Load the script
loadAPI();
}
}
// Load API script
const loadAPI = () => {
const tag = document.createElement("script");
tag.src = "https://www.youtube.com/iframe_api";
const firstScriptTag = document.getElementsByTagName("script")[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
window.isYouTubeIframeAPILoaded = true;
};
// API loaded, start loading player
const loadPlayer = (target, args) => {
// Set event callbacks
args.events = {
onReady: onPlayerReady(event, target),
};
// Create a dummy element for the video
const elem = document.createElement('div');
target.appendChild(elem);
// Initialize player
const player = new YT.Player(elem, args);
};
/**
* Callback for onPlayerReady event
* @param {*} event Youtube player event
* @param {*} target Video target element
*/
const onPlayerReady = (event, target) => {
// Set a class so the play button is visible when video has loaded successfully
target.parentNode.classList.add('loaded');
// Find the play button
const playButton = target.dataset.playButton
? document.getElementById(target.dataset.playButton)
: null;
if (!playButton) {
return;
}
// Return the callback function
return function(event) {
// Add event listener
playButton.addEventListener("click", (e) => playYTVideo(event, target));
}
};
// Play the video
const playYTVideo = (player, target) => {
player.target.playVideo();
target.parentNode.classList.add('playing');
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment