FORUM D’ENTRAIDE INFORMATIQUE (FEI)Site d’assistance et de sécurité informatique

[leprof]

Bonjour à tous,

J’ai codé une petite PWA uniquement en front-end (HTML / JS / CSS), développée en vibe coding, en local sur mon ordinateur (pas de git hub)
C’est une plateforme d’apprentissage en SES, avec différents types de contenus (vidéos, exercices, etc.).

Depuis quelques jours, je rencontre un souci :
Les vidéos TikTok (d’explication pour les cours) s’affichent bien sur mon site, mais elles ne se lisent pas.

La fonction convertTikTokToEmbedUrl génère un https://www.tiktok.com/embed/v2/{id} et j’injecte un <iframe> au clic sur un bouton.
Pourtant, le player reste figé et la vidéo ne démarre pas.

Est-ce que quelqu’un a déjà rencontré ce problème avec l’intégration des vidéos TikTok en PWA/front-end ?

Merci d’avance pour vos retours !

Je vous joint mon JS ici sans la partie JS mais il y a aussi le CSS et le data.js dans lequel revienne le style et le lien vers les video tiktok. D'autre part la pwa est en ligne si besoin je peux vous transmettre le nom de domaine.



// ---------- définition ----------
showDefinition(item, liElement) {
const isMobile = window.innerWidth <= 768;

// État actif visuel
document.querySelectorAll('#termesList li').forEach(li => {
li.classList.remove('active');
li.style.backgroundColor = '';
});
liElement.classList.add('active');

if (isMobile) {
this.showDefinitionInline(item, liElement);
} else {
this.showDefinitionInPanel(item);
}
}

showDefinitionInline(item, liElement) {
const existingInline = document.querySelector('.inline-definition');
if (existingInline) existingInline.remove();

const inlineContainer = document.createElement('div');
inlineContainer.className = 'inline-definition';
inlineContainer.style.cssText = `
background: var(--white);
border: 1px solid var(--accent-light);
border-radius: var(--border-radius);
padding: var(--spacing-md);
margin: var(--spacing-sm) 0;
box-shadow: var(--shadow);
`;

if (item.video && item.video.trim()) {
const embedUrl = this.convertTikTokToEmbedUrl(item.video);

const toggleWrap = document.createElement('div');
toggleWrap.style.cssText = 'margin-bottom: var(--spacing-md); display:flex; justify-content:center;';

const toggleBtn = document.createElement('button');
toggleBtn.className = 'btn btn-secondary';
toggleBtn.type = 'button';
toggleBtn.setAttribute('aria-expanded', 'false');
toggleBtn.textContent = ' Voir les explications';

const explanation = document.createElement('div');
explanation.className = 'explanation-wrapper';
explanation.style.display = 'none';

const videoContainer = document.createElement('div');
videoContainer.className = 'video-container-9-16';
videoContainer.style.marginBottom = 'var(--spacing-md)';

const iframe = document.createElement('iframe');
iframe.dataset.src = embedUrl;
iframe.allowFullscreen = true;
iframe.loading = 'lazy';
iframe.title = `Vidéo TikTok - ${item.terme}`;

videoContainer.appendChild(iframe);
explanation.appendChild(videoContainer);

toggleBtn.addEventListener('click', () => {
const hidden = explanation.style.display === 'none';
if (hidden) {
if (!iframe.src) iframe.src = iframe.dataset.src;
explanation.style.display = '';
toggleBtn.textContent = ' Masquer les explications';
toggleBtn.setAttribute('aria-expanded', 'true');
} else {
explanation.style.display = 'none';
toggleBtn.textContent = ' Voir les explications';
toggleBtn.setAttribute('aria-expanded', 'false');
}
});

toggleWrap.appendChild(toggleBtn);
inlineContainer.appendChild(toggleWrap);
inlineContainer.appendChild(explanation);
}

const title = document.createElement('h4');
title.textContent = item.terme;
title.style.cssText = `
margin: 0 0 var(--spacing-sm) 0;
color: var(--accent);
font-size: var(--text-lg);
`;

const definition = document.createElement('p');
definition.textContent = item.definition;
definition.style.cssText = `
margin: 0;
color: var(--dark);
line-height: 1.5;
`;

inlineContainer.appendChild(title);
inlineContainer.appendChild(definition);

liElement.parentNode.insertBefore(inlineContainer, liElement.nextSibling);

const definitionContent = document.getElementById('definitionContent');
if (definitionContent) {
const placeholder = document.createElement('div');
placeholder.className = 'definition-placeholder';
const message = document.createElement('p');
message.textContent = 'Définition affichée ci-dessus';
message.style.cssText = 'text-align: center; font-style: italic; opacity: 0.7;';
placeholder.appendChild(message);
definitionContent.innerHTML = '';
definitionContent.appendChild(placeholder);
}
}

showDefinitionInPanel(item) {
const existingInline = document.querySelector('.inline-definition');
if (existingInline) existingInline.remove();

const definitionContent = document.getElementById('definitionContent');
if (!definitionContent) return;

const contentDiv = document.createElement('div');
contentDiv.className = 'definition-content';

if (item.video && item.video.trim()) {
const embedUrl = this.convertTikTokToEmbedUrl(item.video);

const toggleWrap = document.createElement('div');
toggleWrap.style.cssText = 'margin-bottom: var(--spacing-md); display:flex; justify-content:center;';

const toggleBtn = document.createElement('button');
toggleBtn.className = 'btn btn-secondary';
toggleBtn.type = 'button';
toggleBtn.setAttribute('aria-expanded', 'false');
toggleBtn.textContent = ' Voir les explications';

const explanation = document.createElement('div');
explanation.className = 'explanation-wrapper';
explanation.style.display = 'none';

const videoContainer = document.createElement('div');
videoContainer.className = 'video-container-9-16';
videoContainer.style.marginBottom = 'var(--spacing-lg)';

const iframe = document.createElement('iframe');
iframe.dataset.src = embedUrl;
iframe.allowFullscreen = true;
iframe.loading = 'lazy';
iframe.title = `Vidéo TikTok - ${item.terme}`;

videoContainer.appendChild(iframe);
explanation.appendChild(videoContainer);

toggleBtn.addEventListener('click', () => {
const hidden = explanation.style.display === 'none';
if (hidden) {
if (!iframe.src) iframe.src = iframe.dataset.src;
explanation.style.display = '';
toggleBtn.textContent = ' Masquer les explications';
toggleBtn.setAttribute('aria-expanded', 'true');
} else {
explanation.style.display = 'none';
toggleBtn.textContent = ' Voir les explications';
toggleBtn.setAttribute('aria-expanded', 'false');
}
});

toggleWrap.appendChild(toggleBtn);
contentDiv.appendChild(toggleWrap);
contentDiv.appendChild(explanation);
}

const title = document.createElement('h4');
title.textContent = item.terme;

const definition = document.createElement('p');
definition.textContent = item.definition;

contentDiv.appendChild(title);
contentDiv.appendChild(definition);

definitionContent.innerHTML = '';
definitionContent.appendChild(contentDiv);
}

// ---------- divers ----------
convertTikTokToEmbedUrl(url) {
if (url.includes('tiktok.com/')) {
const match = url.match(/\/video\/(\d+)/);
if (match) {
const videoId = match[1];
return `https://www.tiktok.com/embed/v2/${videoId}`;
}
}
return url;
}

clearDefinition() {
const definitionContent = document.getElementById('definitionContent');
if (definitionContent) {
const placeholder = document.createElement('div');
placeholder.className = 'definition-placeholder';
const message = document.createElement('p');
message.textContent = 'Aucune définition à afficher';
placeholder.appendChild(message);
definitionContent.innerHTML = '';
definitionContent.appendChild(placeholder);
}
}
}

[leprof]

Je crois avoir réglé le pb même si les vidéos mettent du temps à se charger.
MERCI !