Estoy tratando de crear una función que vacíe un contenedor de video de su contenido (miniatura/botón de reproducción) y lo reemplace con un iframe de, por ejemplo, vimeo o youtube.

Hasta ahora tengo esto:

 replaceIframe(){ const parser = new DOMParser(); const videoContainer = document.querySelector('#landingspage .video-container'); const iframe = document.querySelector('#landingspage .iframe-container').innerHTML; const iframeHTML = parser.parseFromString(iframe, "text/html"); console.log(iframeHTML); if(videoContainer !== null){ videoContainer.addEventListener('click', (ev) => { ev.preventDefault(); videoContainer.replaceChildren(iframeHTML); }); } }

Pero esto me da el error:

 Uncaught DOMException: Failed to execute 'replaceChildren' on 'Element': Nodes of type '#document' may not be inserted inside nodes of type 'DIV'. at HTMLDivElement.

¿Cómo puedo arreglar esto? Primero lo probé sin el objeto analizador, pero luego simplemente reemplaza el contenido con una cadena del iframe html.