// this is an example of what the data will look like when a user imports your component window.datalPksw = {}; datalPksw['video1'] = 'wgVOgGLtPtc'; datalPksw['video1Start'] = 300; datalPksw['video1Switch'] = 6; datalPksw['video2'] = 'dQw4w9WgXcQ'; datalPksw['video2Start'] = 0;

"use strict"; (function () { var data = window.datalPksw || {}; var wrapper = document.getElementById("player-wrapper-datalPksw"); var playerHost = document.getElementById("player-datalPksw"); var iframeId = "player-iframe-datalPksw"; var video1 = getYouTubeVideoId(data.video1); var video2 = getYouTubeVideoId(data.video2); var video1Start = toNonNegativeNumber(data.video1Start, 0); var video1Switch = toNonNegativeNumber(data.video1Switch, 0); var video2Start = toNonNegativeNumber(data.video2Start, 0); var player = null; var hasChanged = false; var switchTimer = null; applyMaxHeightConstraint(wrapper); if (!video1 || !video2) { wrapper.textContent = "This YouTube video is not supported."; return; } createInitialIframe(); loadYouTubeIframeAPI(function () { var iframe = document.getElementById(iframeId); if (!iframe || !window.YT || !window.YT.Player) return; player = new YT.Player(iframe, { events: { onStateChange: onPlayerStateChange, onError: onPlayerError } }); cleanupYouTubeIframeSizing(); }); function createInitialIframe() { var iframe = document.createElement("iframe"); iframe.id = iframeId; iframe.src = buildYouTubeEmbedUrl(video1, video1Start, false); iframe.title = "YouTube video player"; iframe.setAttribute("frameborder", "0"); iframe.setAttribute("allowfullscreen", ""); iframe.setAttribute( "allow", "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" ); iframe.referrerPolicy = "strict-origin-when-cross-origin"; playerHost.innerHTML = ""; playerHost.appendChild(iframe); cleanupYouTubeIframeSizing(); } function onPlayerStateChange(event) { // YT.PlayerState.PLAYING === 1 if (event.data !== 1 || hasChanged) return; hasChanged = true; switchTimer = window.setTimeout(function () { switchToSecondVideo(); }, video1Switch * 1000); } function switchToSecondVideo() { if (player && typeof player.loadVideoById === "function") { try { player.loadVideoById({ videoId: video2, startSeconds: video2Start }); cleanupYouTubeIframeSizing(); return; } catch (e) {} } fallbackSwitchByIframeSrc(); } function fallbackSwitchByIframeSrc() { var iframe = document.getElementById(iframeId); if (!iframe) return; iframe.src = buildYouTubeEmbedUrl(video2, video2Start, true); cleanupYouTubeIframeSizing(); } function onPlayerError(event) { if (window.console && typeof window.console.warn === "function") { window.console.warn("[datalPksw YouTube Switcher] YouTube player error", { code: event && event.data, meaning: getPlayerErrorMeaning(event && event.data) }); } } function buildYouTubeEmbedUrl(videoId, startSeconds, autoplay) { var params = [ "autoplay=" + (autoplay ? "1" : "0"), "controls=0", "rel=0", "playsinline=1", "enablejsapi=1", "start=" + Math.floor(toNonNegativeNumber(startSeconds, 0)) ]; if (window.location.origin && window.location.origin !== "null") { params.push("origin=" + encodeURIComponent(window.location.origin)); } return ( "https://www.youtube.com/embed/" + encodeURIComponent(videoId) + "?" + params.join("&") ); } function cleanupYouTubeIframeSizing() { window.setTimeout(function () { var iframe = wrapper.querySelector("iframe"); if (!iframe) return; iframe.removeAttribute("width"); iframe.removeAttribute("height"); iframe.style.width = "100%"; iframe.style.height = "100%"; iframe.style.display = "block"; iframe.style.border = "0"; iframe.referrerPolicy = "strict-origin-when-cross-origin"; if (!iframe.getAttribute("allow")) { iframe.setAttribute( "allow", "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" ); } iframe.setAttribute("allowfullscreen", ""); }, 0); } function applyMaxHeightConstraint(el) { var mh = ""; var cfg = window.datalPksw_config && typeof window.datalPksw_config === "object" ? window.datalPksw_config : null; if (cfg && typeof cfg.maxHeight === "number" && cfg.maxHeight > 0) { mh = cfg.maxHeight + "px"; } if (!mh && document.body) { mh = (document.body.dataset && document.body.dataset.maxHeight) || document.body.getAttribute("data-max-height") || ""; } mh = String(mh || "").trim(); if (!mh) { el.classList.remove("is-max-constrained"); el.style.removeProperty("--datalPksw-maxh"); return; } el.style.setProperty("--datalPksw-maxh", mh); el.classList.add("is-max-constrained"); } function getYouTubeVideoId(value) { value = String(value || "").trim(); if (!value) return ""; // Raw YouTube video ID. if (/^[a-zA-Z0-9_-]{11}$/.test(value)) { return value; } var url; try { url = new URL(value); } catch (e) { return ""; } var host = url.hostname.replace(/^www\./, "").toLowerCase(); if (host === "youtu.be") { return url.pathname.split("/").filter(Boolean)[0] || ""; } if (host === "youtube.com" || host.endsWith(".youtube.com")) { if (url.pathname === "/watch") { return url.searchParams.get("v") || ""; } var parts = url.pathname.split("/").filter(Boolean); if ( parts[0] === "embed" || parts[0] === "shorts" || parts[0] === "live" ) { return parts[1] || ""; } } return ""; } function toNonNegativeNumber(value, fallback) { var n = Number(value); return Number.isFinite(n) && n >= 0 ? n : fallback; } function loadYouTubeIframeAPI(callback) { if (window.YT && window.YT.Player) { callback(); return; } window.__datalPkswYouTubeCallbacks = window.__datalPkswYouTubeCallbacks || []; window.__datalPkswYouTubeCallbacks.push(callback); if (!window.__datalPkswYouTubeAPIRequested) { window.__datalPkswYouTubeAPIRequested = true; var previousReady = window.onYouTubeIframeAPIReady; window.onYouTubeIframeAPIReady = function () { if (typeof previousReady === "function") { previousReady(); } var callbacks = window.__datalPkswYouTubeCallbacks || []; window.__datalPkswYouTubeCallbacks = []; callbacks.forEach(function (fn) { if (typeof fn === "function") fn(); }); }; var tag = document.createElement("script"); tag.src = "https://www.youtube.com/iframe_api"; var firstScriptTag = document.getElementsByTagName("script")[0]; firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); } } function getPlayerErrorMeaning(code) { switch (code) { case 2: return "Invalid parameter value"; case 5: return "HTML5 player error"; case 100: return "Video not found or removed"; case 101: case 150: return "Video owner does not allow playback in embedded players"; case 153: return "Missing Referer header or equivalent client identification"; default: return "Unknown error"; } } })();

Youtube Video Switcher

About

Preview

Trending Posts with this component