Last active
July 28, 2023 11:32
-
-
Save Niq1982/08592548b23f58885c074b4816ec93d1 to your computer and use it in GitHub Desktop.
Load Youtube videos using iFrame API
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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, | |
})); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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> | |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** | |
* 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