0

Tengo este iframe creado dinámicamente con jQuery pero me da el siguiente error, por lo que no puedo mostrar el video:

Load denied by X-Frame-Options: https://www.youtube.com/watch?v=dWIjQgwM6v0 does not permit cross-origin framing.

Os dejo el código que tengo.

JS:

    var $frameVideo = $("<iframe allowfullscreen></iframe>");
    var atributos = {
      "frameborder":0,
      "src":planetaInfo.video
    };
    $frameVideo.attr(atributos);
    $(document.body).append($frameVideo);

CSS:

#frameVideo{
    position: absolute;
    top: 100px;
    margin-left: 920px;
    background-color: white;
    width: 400px;
    height: 300px;
}

2 respuestas 2

2

Lo que debes cambiar es la URL del video

https://www.youtube.com/embed/dWIjQgwM6v0

Con la palabra watch es un enlace directo y no sirve para el <iframe>. Al presionar el boton "Compartir" del video en youtube y poner el boton "Insertar" sale un <iframe>

Presionando este boton, puedes incluso decir desde que minuto empezar y tendras algo asi:

<iframe width="560" height="315" src="https://www.youtube.com/embed/dWIjQgwM6v0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>

Respecto al style te recomienda usar una clase y no una Id, me imagino que puedes agregar uno o más videos, si se generan dinamicamente y esto es solo una acotación.

var $frameVideo = $("<iframe class='frameVideo' allowfullscreen></iframe>");

Css

.frameVideo{
    position: absolute;
    top: 100px;
    margin-left: 920px;
    background-color: white;
    width: 400px;
    height: 300px;
}
1
  • Al igual que a nuestro compañero Marcos, muchas gracias! ahora funciona a la perfección, había olvidado el id y el https en la url. @sioesi
    – user75193
    Commented el 27 feb. 2018 a las 17:46
0

Debes usar la URL preparada para embeber videos, es decir:

https://www.youtube.com/embed/[ID-VIDEO]

Done [ID-VIDEO] es dWIjQgwM6v0.

Adicionalmente para que los estilos se apliquen debes indicar el id al iframe.

Ejemplo:

var $frameVideo = $("<iframe allowfullscreen></iframe>");
var atributos = {
  // AQUI agregamos el ID para que tome los estilos
  id: 'frameVideo',
  frameborder: 0,
  // AQUI usamos la URL correcta
  src: 'https://www.youtube.com/embed/dWIjQgwM6v0'
};
$frameVideo.attr(atributos);
$(document.body).append($frameVideo);

.

#frameVideo{
    position: absolute;
    top: 100px;
    margin-left: 920px;
    background-color: white;
    width: 400px;
    height: 300px;
}
1
  • Muchas gracias! Antes lo había intentado con la url pero no había puesto https al principio, y el id olvide por completo asignarle, ahora funciona correctamente! @Marcos
    – user75193
    Commented el 27 feb. 2018 a las 17:45

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.