fork/Graphite
1
0
Fork 0
mirror of https://github.com/GraphiteEditor/Graphite.git synced 2026-09-15 22:28:10 +08:00
Code Issues Packages Projects Releases Wiki Activity

Revamp the stand-in for embedded YouTube videos on the website

Browse Source
This commit is contained in:
Keavon Chambers
2026-06-30 01:42:40 -07:00
parent 2a3f1a12a8
commit 3e674c939b
11 changed files with 109 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
website/static/js/component/youtube-embed.js
View File

@@ -1,24 +1,28 @@
window.addEventListener("DOMContentLoaded", () => {
document.querySelectorAll("[data-youtube-embed]").forEach((placeholder) => {
if (!(placeholder instanceof HTMLElement)) return;
placeholder.addEventListener("click", () => {
const loadIframe = () => {
const videoId = placeholder.getAttribute("data-youtube-embed") || "";
const timestamp = placeholder.getAttribute("data-youtube-timestamp") || "";
placeholder.outerHTML = `
<iframe \\
width="1280" \\
height="720" \\
src="https://www.youtube.com/embed/${videoId}?${timestamp ? `start=${timestamp}&` : ""}autoplay=1" \\
frameborder="0" \\
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" \\
allowfullscreen\\
>\\
</iframe>\\
`
.split("\n")
.map((line) => line.trim())
.join("")
.replaceAll(`\\`, "");
const iframe = document.createElement("iframe");
iframe.width = "1280";
iframe.height = "720";
iframe.src = `https://www.youtube.com/embed/${videoId}?autoplay=1${timestamp ? `&start=${timestamp}` : ""}`;
iframe.allow = "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture";
iframe.allowFullscreen = true;
const embed = placeholder.closest("[data-youtube-embed]");
embed?.replaceChildren(iframe);
};
placeholder.addEventListener("click", loadIframe);
placeholder.addEventListener("keydown", (event) => {
if (event.key === "Enter" || event.key === " ") {
event.preventDefault();
loadIframe();
}
});
});
});