Caricamento negato da X-Frame-Options: http://www.youtube.com/v/g5RM5StrMXY non consente il telegramma di origine incrociata

Question

Ho un sito Web in ASP.NET.

Dopo il caricamento della pagina, viene visualizzato sotto l'errore.

Errore: carico negato da X-Frame-Options: http://www.youtube.com/v/lgZBsWGaQY0&feature non consente cross-origine inquadratura.

A causa di questo errore, youtube video non è in grado di aprire in 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> 

Si prega di fornire qualche soluzione per questo errore.

Answer 1

URL originale in Query

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

URL previsto

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

Answer 2

YouTube URL devono essere puliti e normalizzata prima di inserirli in un iframe. Ecco la mia libreria Common js che ho creato per pulire e normalizzare gli URL di 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; 
} 

aggiornato per accogliere gli URL di YouTube Mobile. vale a dire: m.youtube.com Aggiornato per ottenere le immagini pure, e la protezione contro Vars GET nell'URL

Answer 3

Questi passaggi vi farà capire come è fatto:

1. utilizzare il sito di YouTube per trovare il video che si desidera
2. Fare clic sul pulsante 'Condividi' sotto il video
3. Fare clic sul pulsante 'incorporare' accanto al link che mostrano
4. Copia il codice iframe stato dato e incollarlo nel codice HTML del tuo sito web pagina.

Si può vedere bene qui che l'url è generata da /embed che va con il primo ansewer.