Wczytanie zabronione przez X-Frame-Options: http://www.youtube.com/v/g5RM5StrMXY nie zezwala na kopiowanie z różnych źródeł.

Question

Mam witrynę w środowisku ASP.NET.

Po wczytaniu strony pojawia się błąd poniżej.

Błąd: Obciążenie zabronione przez X-Frame-Opcje: http://www.youtube.com/v/lgZBsWGaQY0&feature nie pozwala na ramkowanie krzyżowe.

Z powodu tego błędu, youtube film nie jest w stanie otworzyć w 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> 

Proszę podać rozwiązanie tego problemu.

Answer 1

Original URL w Query

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

Oczekiwany URL

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

Answer 2

YouTube adresy URL muszą być oczyszczone i znormalizowane przed włożeniem ich do iframe. Oto moja biblioteka zgodna z Common Js, którą utworzyłem, aby oczyścić i znormalizować adresy URL w 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; 
} 

Zaktualizowano, aby uwzględniać adresy URL YouTube Mobile. tj: m.youtube.com Updated uzyskać obrazy, jak również i chroni przed Vars GET w adresie URL

Answer 3

Te kroki pozwoli Ci zrozumieć, jak to się robi:

1. Korzystanie z serwisu YouTube, aby znaleźć wideo chcesz
2. Kliknij przycisk „Udostępnij” pod filmem
3. Kliknij przycisk Osadź obok linku one pokazać
4. Skopiuj kod iframe podane i wklej go do kodu HTML swojej sieci strona.

Widać tu dobrze, że adres URL jest generowany przez /embed który jedzie z pierwszym ansewer.