Skip to content
SlashClone
DiscoverUse in ClaudeSubmit a link
Sign in
Made by@slashclone

Embed YouTube videos without tracking cookies

@slashclone/privacy-friendly-youtube-embed

Embed YouTube videos on your site without loading anything from Google until the visitor presses Play or allows videos. A click-to-play placeholder with a local poster swaps in the youtube-nocookie.com player, with a keyboard-friendly button, no layout shift, CSP entries, and a Playwright test that proves no YouTube request happens first. React and HTML templates. Not legal advice.

SkillDevOpsv0.1.0
Use in Claude Save Like Clone Comment
Activity
New: be the first to try it
  1. 1// Click-to-play YouTube embeds for plain HTML. No dependencies, no build step.
  2. 2//
  3. 3// Markup (see youtube-embed.html):
  4. 4// <div class="yt-embed" data-video="VIDEO_ID_OR_LINK" data-title="Title"
  5. 5// data-duration="4:12" data-poster="/posters/intro.jpg"></div>
  6. 6//
  7. 7// Nothing is fetched from Google until the visitor presses Play, or until your
  8. 8// consent layer calls YouTubeEmbeds.setAllowed(true) because the visitor allowed
  9. 9// embedded videos. To offer "always allow videos" here, set
  10. 10// YouTubeEmbeds.onAllowAll = function () { ... } before calling init().
  11. 11
  12. 12(function () {
  13. 13 "use strict";
  14. 14
  15. 15 var PLAYER_ORIGIN = "https://www.youtube-nocookie.com";
  16. 16 var ID = /^[A-Za-z0-9_-]{11}$/;
  17. 17 var allowed = false;
  18. 18
  19. 19 function parseVideoId(input) {
  20. 20 if (ID.test(input)) return input;
  21. 21 var u;
  22. 22 try {
  23. 23 u = new URL(input);
  24. 24 } catch (e) {
  25. 25 return null;
  26. 26 }
  27. 27 if (u.protocol !== "https:" && u.protocol !== "http:") return null;
  28. 28 var host = u.hostname.toLowerCase().replace(/^(www|m|music)\./, "");
  29. 29 var id = null;
  30. 30 if (host === "youtu.be") id = u.pathname.split("/")[1] || null;
  31. 31 else if (host === "youtube.com" || host === "youtube-nocookie.com") {
  32. 32 if (u.pathname === "/watch") id = u.searchParams.get("v");
  33. 33 else {
  34. 34 var m = /^\/(?:embed|shorts|live|v)\/([^/?#]+)/.exec(u.pathname);
  35. 35 id = m ? m[1] : null;
  36. 36 }
  37. 37 }
  38. 38 return id && ID.test(id) ? id : null;
  39. 39 }
  40. 40
  41. 41 function el(tag, attrs, text) {
  42. 42 var n = document.createElement(tag);
  43. 43 for (var k in attrs) n.setAttribute(k, attrs[k]);
  44. 44 if (text) n.textContent = text;
  45. 45 return n;
  46. 46 }
  47. 47
  48. 48 function playerSrc(id, box, autoplay) {
  49. 49 var p = new URLSearchParams({ rel: "0", playsinline: "1" });
  50. 50 if (autoplay) p.set("autoplay", "1");
  51. 51 var start = parseInt(box.dataset.start || "", 10);
  52. 52 if (start > 0) p.set("start", String(start));
  53. 53 if (box.dataset.captions === "true") p.set("cc_load_policy", "1");
  54. 54 return PLAYER_ORIGIN + "/embed/" + id + "?" + p.toString();
  55. 55 }
  56. 56
  57. 57 function showPlayer(box, clicked) {
  58. 58 if (box.dataset.state === "player") return;
  59. 59 var id = box.dataset.videoId;
  60. 60 var frame = el("iframe", {
  61. 61 src: playerSrc(id, box, clicked),
  62. 62 title: box.dataset.title || "YouTube video",
  63. 63 loading: clicked ? "eager" : "lazy",
  64. 64 allow: "autoplay; encrypted-media; picture-in-picture; fullscreen",
  65. 65 allowfullscreen: "",
  66. 66 referrerpolicy: "strict-origin-when-cross-origin",
  67. 67 });
  68. 68 frame.className = "yt-embed__fill";
  69. 69 box.replaceChildren(frame);
  70. 70 box.dataset.state = "player";
  71. 71 if (clicked) frame.focus();
  72. 72 }
  73. 73
  74. 74 function showPlaceholder(box) {
  75. 75 var id = box.dataset.videoId;
  76. 76 var title = box.dataset.title || "YouTube video";
  77. 77 box.replaceChildren();
  78. 78 box.dataset.state = "placeholder";
  79. 79
  80. 80 if (box.dataset.poster) {
  81. 81 var img = el("img", { src: box.dataset.poster, alt: "", loading: "lazy", decoding: "async" });
  82. 82 img.className = "yt-embed__fill yt-embed__poster";
  83. 83 box.appendChild(img);
  84. 84 }
  85. 85
  86. 86 var layer = el("div", {});
  87. 87 layer.className = "yt-embed__fill yt-embed__layer";
  88. 88
  89. 89 var heading = el("p", {}, title);
  90. 90 heading.className = "yt-embed__title";
  91. 91 if (box.dataset.duration)
  92. 92 heading.appendChild(el("span", {}, " (" + box.dataset.duration + ")"));
  93. 93
  94. 94 var play = el("button", { type: "button", "aria-label": "Play video: " + title }, "Play video");
  95. 95 play.className = "yt-embed__play";
  96. 96 play.addEventListener("click", function () {
  97. 97 showPlayer(box, true);
  98. 98 });
  99. 99
  100. 100 var note = el("p", {}, "Playing loads the video from YouTube, which may set cookies. ");
  101. 101 note.className = "yt-embed__note";
  102. 102 note.appendChild(
  103. 103 el(
  104. 104 "a",
  105. 105 {
  106. 106 href: "https://www.youtube.com/watch?v=" + id,
  107. 107 rel: "noopener noreferrer",
  108. 108 target: "_blank",
  109. 109 },
  110. 110 "Watch on YouTube",
  111. 111 ),
  112. 112 );
  113. 113 if (typeof api.onAllowAll === "function") {
  114. 114 note.appendChild(document.createTextNode(" or "));
  115. 115 var always = el("button", { type: "button" }, "always allow videos");
  116. 116 always.className = "yt-embed__link";
  117. 117 always.addEventListener("click", function () {
  118. 118 api.onAllowAll();
  119. 119 });
  120. 120 note.appendChild(always);
  121. 121 }
  122. 122 note.appendChild(document.createTextNode("."));
  123. 123
  124. 124 layer.appendChild(heading);
  125. 125 layer.appendChild(play);
  126. 126 layer.appendChild(note);
  127. 127 box.appendChild(layer);
  128. 128 }
  129. 129
  130. 130 function init(root) {
  131. 131 var boxes = (root || document).querySelectorAll(".yt-embed:not([data-state])");
  132. 132 for (var i = 0; i < boxes.length; i++) {
  133. 133 var box = boxes[i];
  134. 134 var id = parseVideoId(box.dataset.video || "");
  135. 135 if (!id) {
  136. 136 box.hidden = true;
  137. 137 continue;
  138. 138 }
  139. 139 box.dataset.videoId = id;
  140. 140 if (allowed) showPlayer(box, false);
  141. 141 else showPlaceholder(box);
  142. 142 }
  143. 143 }
  144. 144
  145. 145 // Call with true when the visitor grants embedded videos, false when they revoke.
  146. 146 // Revoking replaces players with placeholders; cookies YouTube already set are
  147. 147 // the consent layer's job to explain or clear.
  148. 148 function setAllowed(value) {
  149. 149 allowed = !!value;
  150. 150 var boxes = document.querySelectorAll(".yt-embed[data-video-id]");
  151. 151 for (var i = 0; i < boxes.length; i++) {
  152. 152 if (allowed) showPlayer(boxes[i], false);
  153. 153 else showPlaceholder(boxes[i]);
  154. 154 }
  155. 155 }
  156. 156
  157. 157 var api = { init: init, setAllowed: setAllowed, parseVideoId: parseVideoId, onAllowAll: null };
  158. 158 window.YouTubeEmbeds = api;
  159. 159})();
Sign in to comment on a line

Cookie settings

Cookies that keep you signed in and remember these choices are always on. Everything else is off until you turn it on.