UltralyticsAssistant 1 month ago
parent 5555e3b761
commit 50edc85202
  1. 6
      docs/overrides/javascript/lite-yt-embed.js
  2. 13
      docs/overrides/stylesheets/lite-yt-embed.css

@ -107,8 +107,8 @@ class LiteYTEmbed extends HTMLElement {
LiteYTEmbed.addPrefetch('preconnect', 'https://www.google.com'); LiteYTEmbed.addPrefetch('preconnect', 'https://www.google.com');
// Not certain if these ad related domains are in the critical path. Could verify with domain-specific throttling. // Not certain if these ad related domains are in the critical path. Could verify with domain-specific throttling.
LiteYTEmbed.addPrefetch('preconnect', 'https://googleads.g.doubleclick.net'); LiteYTEmbed.addPrefetch('preconnect', 'https://googleads.g.double-click.net');
LiteYTEmbed.addPrefetch('preconnect', 'https://static.doubleclick.net'); LiteYTEmbed.addPrefetch('preconnect', 'https://static.double-click.net');
LiteYTEmbed.preconnected = true; LiteYTEmbed.preconnected = true;
} }
@ -165,7 +165,7 @@ class LiteYTEmbed extends HTMLElement {
addNoscriptIframe() { addNoscriptIframe() {
const iframeEl = this.createBasicIframe(); const iframeEl = this.createBasicIframe();
const noscriptEl = document.createElement('noscript'); const noscriptEl = document.createElement('noscript');
// Appending into noscript isn't equivalant for mysterious reasons: https://html.spec.whatwg.org/multipage/scripting.html#the-noscript-element // Appending into noscript isn't equivalent for mysterious reasons: https://html.spec.whatwg.org/multipage/scripting.html#the-noscript-element
noscriptEl.innerHTML = iframeEl.outerHTML; noscriptEl.innerHTML = iframeEl.outerHTML;
this.append(noscriptEl); this.append(noscriptEl);
} }

@ -16,12 +16,19 @@ lite-youtube::before {
position: absolute; position: absolute;
top: 0; top: 0;
/* Pixel-perfect port of YT's gradient PNG, using https://github.com/bluesmoon/pngtocss plus optimizations */ /* Pixel-perfect port of YT's gradient PNG, using https://github.com/bluesmoon/pngtocss plus optimizations */
background-image: linear-gradient(180deg, rgb(0 0 0 / 67%) 0%, rgb(0 0 0 / 54%) 14%, rgb(0 0 0 / 15%) 54%, rgb(0 0 0 / 5%) 72%, rgb(0 0 0 / 0%) 94%); background-image: linear-gradient(
180deg,
rgb(0 0 0 / 67%) 0%,
rgb(0 0 0 / 54%) 14%,
rgb(0 0 0 / 15%) 54%,
rgb(0 0 0 / 5%) 72%,
rgb(0 0 0 / 0%) 94%
);
height: 99px; height: 99px;
width: 100%; width: 100%;
font-family: "YouTube Noto", Roboto, Arial, Helvetica, sans-serif; font-family: "YouTube Noto", Roboto, Arial, Helvetica, sans-serif;
color: hsl(0deg 0% 93.33%); color: hsl(0deg 0% 93.33%);
text-shadow: 0 0 2px rgba(0,0,0,.5); text-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
font-size: 18px; font-size: 18px;
padding: 25px 20px; padding: 25px 20px;
overflow: hidden; overflow: hidden;
@ -65,7 +72,7 @@ lite-youtube > .lty-playbtn {
cursor: pointer; cursor: pointer;
z-index: 1; z-index: 1;
filter: grayscale(100%); filter: grayscale(100%);
transition: filter .1s cubic-bezier(0, 0, 0.2, 1); transition: filter 0.1s cubic-bezier(0, 0, 0.2, 1);
border: 0; border: 0;
} }

Loading…
Cancel
Save