Ejemplo de video de youtube en ventana secundaria
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Página con Ventana Secundaria</title> <style> body { margin: 0; font-family: Arial, sans-serif; } .main-window { background-color: #f4f4f4; padding: 20px; text-align: center; } #overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); } .secondary-window { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: white; padding: 20px; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5); } .overlay button { position: absolute; top: 10px; right: 10px; background-color: transparent; border: none; font-size: 20px; cursor: pointer; } </style> </head> <body> <div class="main-window"> <h1>Ventana Principal</h1> <p>Texto y datos de ejemplo en la ventana principal.</p> <button id="openButton">Abrir Ventana Secundaria</button> </div> <div id="overlay" class="overlay"> <div class="secondary-window"> <button id="closeButton">X</button> <iframe width="800" height="600" src="https://www.youtube.com/embed/dqynXqte24o" frameborder="0" allowfullscreen></iframe> </div> </div> <script"> const openButton = document.getElementById("openButton"); const overlay = document.getElementById("overlay"); const closeButton = document.getElementById("closeButton"); openButton.addEventListener("click", () => { overlay.style.display = "block"; }); closeButton.addEventListener("click", () => { overlay.style.display = "none"; }); </script> </body> </html>