web-dev-qa-db-ja.com

X-Frame-Optionsによって拒否されたロード：http://www.youtube.com/v/g5RM5StrMXYはクロスオリジンフレーミングを許可しません

ASP.NETにWebサイトがあります。

ページの読み込み後、次のエラーが発生しています。

エラー：X-Frame-Optionsによってロードが拒否されました： http://www.youtube.com/v/lgZBsWGaQY0&feature はクロスオリジンフレーミングを許可しません。

enter image description here

このエラーのため、YouTubeビデオは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>

このエラーの解決策を提供してください。

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

クエリの元のURL

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

予期されるURL

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

YouTube Urlsは、iframeに挿入する前にクリーンアップおよび正規化する必要があります。 YouTubeのURLを削除して正規化するために作成したCommon js準拠のライブラリを次に示します。

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;
}

YouTubeモバイルのURLに対応するために更新されました。例：m.youtube.comも同様に画像を取得し、URLのGET変数から保護するために更新されました

5
Mardok

これらの手順により、それがどのように行われるかを理解できます。

  1. Youtubeサイトを使用して、目的のビデオを見つけます
  2. ビデオの下にある「共有」ボタンをクリックします
  3. 表示されるリンクの横にある[埋め込み]ボタンをクリックします
  4. 指定されたiframeコードをコピーして、Webページのhtmlに貼り付けます。

enter image description here

ここでは、URLが/ embedによって生成され、最初のansewerで生成されることがよくわかります。

1
Mohamed23gharbi