¿Es posible iniciar la reproducción de video del iframe de YouTube desde un botón externo?
<button>Play Button</button> <iframe width="560" height="315" src="https://www.youtube.com/embed/HJtJXMKpl2g" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>Nota de exención de responsabilidad: el video iframe no me pertenece.
Dado que este video está en iframe y en otro host, por razones seguras no puede acceder a la estructura interna de ese iframe por
const iframe = document.getElementById("myFrame"); const video = iframe.contentWindow.document.getElementsByTagName("video")[0]; video.play(); Agregar "autoplay=1" al src puede ayudar, pero solo puede comenzar una vez video
iframe.setAttribute('src', iframe.getAttribute('src') + "?autoplay=1")Sí, es posible. Prueba esto y ajústalo como te mereces:
<body> <div class="bgimg w3-display-container w3-animate-opacity w3-text-white"> <div class="w3-display-middle"> <h1 class="w3-jumbo w3-animate-top">Click on "Play Button"</h1> <hr class="w3-border-grey" style="margin:auto;width:40%"> <p><button class="w3-center center transparent_btn" onclick="play1()">Play Button</button></p> <div id="youtube-frame"></div> </div> </div> </body> <script> function play1() { var frame = document.getElementById("youtube-frame"); frame.innerHTML = "<iframe width='560' height='315' src='https://www.youtube.com/embed/AkFs3YzxN_E' frameborder='0' allow='accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture' allowfullscreen></iframe>"; } </script>