Substack: GIFs nur per Klick abspielen
Pausiert Loop-Videos und GIFs und fügt eine „play"-Schaltfläche hinzu, damit nichts von selbst startet.
Code zum Kopieren
// Replace autoplaying GIFs (and looped MP4s used as GIFs) with click-to-play stills
(function () {
function stopVideo(v) {
try { v.autoplay = false; v.loop = false; v.removeAttribute('autoplay'); v.pause(); } catch (e) {}
if (v.dataset.jzGif) { return; }
v.dataset.jzGif = '1';
v.controls = false;
var play = document.createElement('button');
play.type = 'button';
play.textContent = '▶ play';
play.style.cssText = 'position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background:rgba(0,0,0,.7);color:#fff;border:none;border-radius:18px;padding:6px 12px;cursor:pointer;font:600 13px/1 system-ui,sans-serif;z-index:5;';
var wrap = v.parentNode;
if (wrap && getComputedStyle(wrap).position === 'static') { wrap.style.position = 'relative'; }
if (wrap) { wrap.appendChild(play); }
play.addEventListener('click', function () {
try { v.play(); } catch (e) {}
play.remove();
});
}
function patch() {
document.querySelectorAll('video[autoplay], video[loop]').forEach(stopVideo);
document.querySelectorAll('img[src$=".gif" i]').forEach(function (img) {
if (img.dataset.jzGif) { return; }
img.dataset.jzGif = '1';
var orig = img.getAttribute('src') || '';
img.addEventListener('click', function () { img.setAttribute('src', orig + (orig.indexOf('?') > -1 ? '&' : '?') + 'jz=' + Date.now()); }, { once: true });
// freeze by reloading once it's in the DOM (browsers usually animate on load only)
img.style.cursor = 'pointer';
img.title = 'Click to play GIF';
});
}
patch();
var obs = new MutationObserver(function () {
clearTimeout(window.__jzSubGif);
window.__jzSubGif = setTimeout(patch, 300);
});
obs.observe(document.body, { childList: true, subtree: true });
})();
So verwendest du dieses Beispiel
- Kopiere den Code mit der Schaltfläche oben.
- Installiere JustZix (2 Minuten) und öffne die Erweiterung auf der Zielseite.
- Füge eine neue Regel hinzu, die zu dieser Seite passt.
- Füge den Code in das JavaScript-Panel der Regel ein und speichere — er läuft bei jedem Seitenbesuch.
Bewerte dieses Beispiel
Noch keine Bewertungen — sei der Erste.