me gustaria tu ayuda tengo que insertar un video de youtube cuya url se recibe via json; en particular con
document.getElementById("idframe").innerHTML=myJson.Items[4].value;Me sale https://youtu.be/ILmvKC-H1l0
Hasta aquí todo bien. Para insertar el video de youtube en una página html, estaba siguiendo este tutorial .
Simplemente no puedo conseguir lo que quiero. Aparece un cuadro gris con las palabras: Es posible que se haya movido, cambiado o eliminado. ¿Puedes ayudarme amablemente?
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style></style> </head> <body> <div> <div class="video"> <iframe id="idframe" width="420" height="345" src="myFunction()"> </iframe> </div> <br> <br> <script> function myFunction() { var xmlhttp = new XMLHttpRequest(); var url = "https://vnwcn9gt89.execute-api.us-east-2.amazonaws.com/book"; xmlhttp.onreadystatechange = function() { if (this.readyState == 4 && this.status == 200) { var myJson = JSON.parse(this.responseText); document.getElementById("idframe").innerHTML = myJson.Items[4].value; } }; xmlhttp.open("GET", url, true); xmlhttp.send(); } </script> </body> </html>Se requieren un par de cambios en su código:
No puede utilizar servicios de URL abreviados como https://youtu.be/ . Su URL debe ser https://youtube.com/embed/ILmvKC-H1l0
innerHTML no funcionará para iframe . Pruebe la siguiente solución
(function() { //var xmlhttp = new XMLHttpRequest(); var url = "https://vnwcn9gt89.execute-api.us-east-2.amazonaws.com/book"; /*xmlhttp.onreadystatechange = function() { if (this.readyState == 4 && this.status == 200) { var myJson = JSON.parse(this.responseText); //Your response for myJson.Items[4].value, should be equal to "https://youtube.com/embed/ILmvKC-H1l0" let youtubeUrl = myJson.Items[4].value; document.getElementById("idframe").src = youtubeUrl; } }; xmlhttp.open("GET", url, true); xmlhttp.send();*/ //consider incase you have youtubeUrl as " youtu.be/ILmvKC-H1l0"; //Extract the id and append it like below let returnedYoutubeUrl = "https://youtu.be/ILmvKC-H1l0"; let id = returnedYoutubeUrl.split("/")[3]; console.log(id); document.getElementById("idframe").src = "https://youtube.com/embed/"+id; })(); <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style></style> </head> <body> <div> <div class="video"> <iframe id="idframe" width="420" height="345"> </iframe> </div> </div> </body> </html>