Load denied by X-Frame-Options: http://www.youtube

Question

I have a website in ASP.NET.

After page load, I am getting below error.

Error: Load denied by X-Frame-Options: http://www.youtube.com/v/lgZBsWGaQY0&feature does not permit cross-origin framing.

Due to this error, youtube video is not able to open 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>

Please provide some solution for this error.

Answer 1

YouTube Urls must be cleaned and normalized before inserting them into an iframe. Here is my Common js compliant library I created to clean and normalize YouTube urls.

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

Updated to accommodate YouTube Mobile urls. ie: m.youtube.com Updated to get images as well, and protect against GET vars in the url

Answer 2

These steps will make you understand how it is done :

1. Use the youtube site to find the video you want
2. Click the 'Share' button below the video
3. Click the 'Embed' button next to the link they show you
4. Copy the iframe code given and paste it into the html of your web page.

You can see well here that the url is generated by /embed which goes with the first ansewer.

Answer 3

Original URL in Query

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

Expected URL

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