web-dev-qa-db-fra.com

Chargement refusé par X-Frame-Options: http://www.youtube.com/v/g5RM5StrMXY ne permet pas le cadrage cross-origine

J'ai un site Web en ASP.NET.

Après le chargement de la page, j'obtiens en dessous de l'erreur.

Erreur: charge refusée par X-Frame-Options: http://www.youtube.com/v/lgZBsWGaQY0&feature ne permet pas le cadrage d'origine croisée.

enter image description here

En raison de cette erreur, la vidéo YouTube ne peut pas s'ouvrir dans iframe.

<div style="display: none; position: relative;">
    <div id="divYouTubeClasses">
        <iframe id="Iframe1" style="background-color: White !important; border: 0;" width="835"
                    height="430" src="http://www.youtube.com/v/g5RM5StrMXY" scrolling="no"></iframe>
    </div>
</div>

Veuillez fournir une solution à cette erreur.

asp.netasp.net-mvcasp.net-mvc-3iframe
45
Gaurav123

RL d'origine dans la requête

http://www.youtube.com/v/lgZBsWGaQY0&feature

RL attendue

http://www.youtube.com/embed/lgZBsWGaQY0?autoplay=1
98
user2007801

Les URL YouTube doivent être nettoyées et normalisées avant de les insérer dans une iframe. Voici ma bibliothèque compatible Common js que j'ai créée pour nettoyer et normaliser les URL YouTube.

var getVidId = function(url)
{
    var vidId;
    if(url.indexOf("youtube.com/watch?v=") !== -1)//https://m.youtube.com/watch?v=e3S9KINoH2M
    {
        vidId = url.substr(url.indexOf("youtube.com/watch?v=") + 20);
    }
    else if(url.indexOf("youtube.com/watch/?v=") !== -1)//https://m.youtube.com/watch/?v=e3S9KINoH2M
    {
        vidId = url.substr(url.indexOf("youtube.com/watch/?v=") + 21);
    }
    else if(url.indexOf("youtu.be") !== -1)
    {
        vidId = url.substr(url.indexOf("youtu.be") + 9);
    }
    else if(url.indexOf("www.youtube.com/embed/") !== -1)
    {
        vidId = url.substr(url.indexOf("www.youtube.com/embed/") + 22);
    }
    else if(url.indexOf("?v=") !== -1)// http://m.youtube.com/?v=tbBTNCfe1Bc
    {
        vidId = url.substr(url.indexOf("?v=")+3, 11);
    }
    else
    {
        console.warn("YouTubeUrlNormalize getVidId not a youTube Video: "+url);
        vidId = null;
    }

    if(vidId.indexOf("&") !== -1)
    {
        vidId = vidId.substr(0, vidId.indexOf("&") );
    }
    return vidId;
};

var YouTubeUrlNormalize = function(url)
{
    var rtn = url;
    if(url)
    {
        var vidId = getVidId(url);
        if(vidId)
        {
            rtn = "https://www.youtube.com/embed/"+vidId;
        }
        else
        {
            rtn = url;
        }
    }

    return rtn;
};

YouTubeUrlNormalize.getThumbnail = function(url, num)
{
    var rtn, vidId = getVidId(url);
    if(vidId)
    {
        if(!isNaN(num) && num <= 4 && num >= 0)
        {
            rtn = "http://img.youtube.com/vi/"+vidId+"/"+num+".jpg";
        }
        else
        {
            rtn = "http://img.youtube.com/vi/"+getVidId(url)+"/default.jpg";
        }
    }
    else
    {
        return null;
    }
    return rtn;
};

YouTubeUrlNormalize.getFullImage = function(url)
{
    var vidId = getVidId(url);
    if(vidId)
    {
        return "http://img.youtube.com/vi/"+vidId+"/0.jpg";
    }
    else
    {
        return null;
    }
};

if ( typeof exports !== "undefined" ) {
    module.exports = YouTubeUrlNormalize;
}
else if ( typeof define === "function" ) {
    define( function () {
        return YouTubeUrlNormalize;
    } );
}
else {
    window.YouTubeUrlNormalize = YouTubeUrlNormalize;
}

Mis à jour pour prendre en charge les URL YouTube Mobile. Par exemple: m.youtube.com Mis à jour pour obtenir également des images et se protéger contre les vars GET dans l'url

5
Mardok

Ces étapes vous feront comprendre comment cela se fait:

  1. Utilisez le site YouTube pour trouver la vidéo que vous souhaitez
  2. Cliquez sur le bouton "Partager" sous la vidéo
  3. Cliquez sur le bouton "Intégrer" à côté du lien qu'ils vous montrent
  4. Copiez le code iframe donné et collez-le dans le code HTML de votre page Web.

enter image description here

Vous pouvez bien voir ici que l'url est générée par /embed qui va avec la première réponse.

1
Mohamed23gharbi