Diskuse

Téma: videa z youtube a jejich cookies

KavaTo (1.11.2025 21:38)
Ahoj, prosím o radu, chystám se na aktualizaci webu kadeřnictví, běžící ještě na staré verzi 7.5.3 na novou aktuální verzi.
Pokud sem dobře koukal, tak patch by měl být dostupný, jen jde ještě o starý model, kdy se musí nahrát do adresáře pomocí ftp ( u novější verze jde skrze souborový manažer pokud se nepletu). Co bych ale potřeboval nějak vyřešit, samotný web nezbírá žádné info o uživatelých, registrace povolené nejsou, ale budou se na stránky umistovat videa z youtube a ty už mají svá cookies... Bude složité v SL nějak nastavit, aby např. před spuštěním videa uživatel musel potvrtit souhlas, (a až poté by se video spustilo) či nějak jinak to vyřešit? Normálně bych to asi neřešil, ale jelikož jde defakto o firemní stránky, pro jistotu bych to chtěl nějak udělat. Díky
postZaslat odpověď
VývojářiJirka Daněk (2.11.2025 13:17)
Já jsem to řešil, úpravou url videa namísto https://www.youtube.com/watch?v=dQw4w9WgXcQpřes https://www.youtube-nocookie.com/watch?v=dQw4w9WgXcQNevím kdy přesně se tam pak začaly cookies taky přidávat. (viz. https://ctrlv.cz/fgsK)

Možná by to mohlo jít přes nějaký JS, kdy by se video do iframu nějak vložilo po odsouhlaseni

HTML
<div class="youtube-placeholder" data-video-id="dQw4w9WgXcQ">
<div class="thumbnail">
<img src="https://img.youtube.com/vi/dQw4w9WgXcQ/hqdefault.jpg" alt="Náhled videa">
<button class="play-btn">Souhlasím a přehrát video</button>
</div>
</div>
CSS
.youtube-placeholder {
position: relative;
display: inline-block;
cursor: pointer;
width: 560px;
height: 315px;
}
.youtube-placeholder img {
width: 100%;
height: 100%;
object-fit: cover;
}
.youtube-placeholder .play-btn {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: rgba(0,0,0,0.7);
color: white;
border: none;
padding: 10px 20px;
font-size: 1rem;
cursor: pointer;
border-radius: 4px;
}
JavaScript
document.querySelectorAll('.youtube-placeholder .play-btn').forEach(button => {
button.addEventListener('click', () => {
const container = button.closest('.youtube-placeholder');
const videoId = container.getAttribute('data-video-id');

// Zde můžeš ověřit, že uživatel dal souhlas s cookies
// např. if (!hasConsent('marketing')) return;

const iframe = document.createElement('iframe');
iframe.src = `https://www.youtube-nocookie.com/embed/${videoId}?autoplay=1`;
iframe.title = "YouTube video player";
iframe.allow = "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture";
iframe.allowFullscreen = true;
iframe.width = "560";
iframe.height = "315";

container.innerHTML = ""; // Vymaže placeholder
container.appendChild(iframe);
});
});https://jsfiddle.net/jdanek/ogkvpb84/1/
KavaTo (2.11.2025 14:05)
Někde sem četl že varianta "youtube-nocookie" která je v nabídce nastavení videa z youtube při generování kodu na web není zcela dostačující. Prý i při zaškrtnutí této volby dochází k:

"Důležité je si uvědomit, že i s tímto režimem může YouTube ukládat data do Local Storage prohlížeče, tzv. "cookies jako Local Storage", čímž se prakticky cookie v lokálním úložišti prohlížeče uchovává,."

Ještě mě napadá, umístit na stránky jen screen (obrázek) z videa, kdy po kliknutí na něj (pokus o spuštění) bude uživatel odkázán v novém okně přímo na youtube.com. I když nejde o nejhezčí řešení v rámci stránek, možná by byla tato varianta nejsnažší...
VývojářiJirka Daněk (3.11.2025 0:43)
Zkus to moje řešení nějak implementovat, dokud neklikneš tak tam vlastně je jen img z YouTube.
KavaTo (7.11.2025 18:59)
Díky. Jak se na to dostanu, určitě zkusím.
KavaTo (15.11.2025 23:58)
Nechci zakládat další téma: ale když vložím video z youtube do článku, ať už bez/ či s pomocí TinyMCE, tak při prohlížení na mobilu se video nezmenší, ale uřízne se pravá strana. (šablona Minimalistic). Zkoušel sem upravit v kodu videa "width="560" na "width="100%" ale výsledek je stejný. Jak docílim, aby se video přizpůsobilo displeji mobilu a neseřízlo se.
Pitva (19.11.2025 14:19)
Zkus si CSS upravit na tohle:

.youtube-placeholder {
position: relative;
display: inline-block;
cursor: pointer;
width: 100%;
max-width: 560px;
aspect-ratio: 16 / 9;
}

.youtube-placeholder iframe {
width: 100%;
height: 100%;
}
KavaTo (21.11.2025 21:58)
Prosimtě, můžeš mě více (podrobněji) navést jak na to?
Pitva (24.11.2025 12:37)
No, to CSS, co ti dal Jirka, tak si tam jen doplň to, co jsem psal já.

Celej ten CSS kód teda bude:

.youtube-placeholder {
position: relative;
display: inline-block;
cursor: pointer;
width: 100%;
max-width: 560px;
aspect-ratio: 16 / 9;
}

.youtube-placeholder iframe {
width: 100%;
height: 100%;
}

.youtube-placeholder img {
width: 100%;
height: 100%;
object-fit: cover;
}

.youtube-placeholder .play-btn {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: rgba(0,0,0,0.7);
color: white;
border: none;
padding: 10px 20px;
font-size: 1rem;
cursor: pointer;
border-radius: 4px;
}
Netestoval jsem to, ale myslím, že to bude fungovat.