Youtube - SecurityError: Blocked a frame with origin “null” from accessing a cross-origin frame

Question

I made a website, which opens a popup window with this JavaScript code:

document.getElementById("i_song_name").innerHTML = 
'<iframe width="100" height="100" src="https://www.youtube.com/v/FjNdYp2gXRY?autoplay=1" id="i_song_name_i"></iframe>';

This code adds an iframe tag to the span tag.

Then in JS, I want to get title of YouTube website with this code:

 document.getElementById("h3").innerHTML =
       document.getElementById("i_song_name_i")
           .contentWindow.document.head
           .getElementsByTagName("title")[0].innerHTML
           .replace(" - YouTube", "");

So I want to have this code:

<span id="i_song_name">
        <iframe width="100" 
                height="100" 
                src="https://www.youtube.com/v/FjNdYp2gXRY?autoplay=1"
                id="i_song_name_i"></iframe>
</span>
<div id="h3">Ahrix - Nova [NCS Release]</div>

Unfortunately, my browser (Google Chrome), still prints an error:

SecurityError: Blocked a frame with origin "null" from accessing a cross-origin frame.

Any idea how to solve this problem?

this is the purpose of the protection. maybe you can use youtube API for that. — akonsu
I'm not posting this as an answer because it uses jQuery and you didn't indicate that you were using it. But here is an example of using AJAX to request a pages HTML then retrieve the title from it: stackoverflow.com/questions/7599365/… . In other words, you could do a separate call via AJAX to get the title. — jwatts1980
BTW, one of the answers in that article uses a regular expression to pull the title out of the response text. That is something you can do in pure javascript. — jwatts1980
@PDKnight I am deleting my answer because it will not work as I have posted it. Upon digging deeper, I found that YouTube is blocking cross site requests. As mentioned above, you will most likely need to look into the YouTube API to get the name of the video. I apologize for wasting your time. — jwatts1980
This article may help you with a starting point on getting familiar with the YouTube API: apiblog.youtube.com/2012/05/… — jwatts1980

PDKnight PDKnight · Accepted Answer · 2014-08-23T12:39:19

I SOLVED IT! I used YouTube API and it works fine :)

Edit (December 2015): Here's repaired version of the code:

Working demo

<!DOCTYPE HTML>
<html>
<head>
    <style>
        #player {
            display: none;
        }
    </style>
</head>
<body>
<div id="player"></div>
<div id="h3"></div>
<input type="text" placeholder="Type YTB link here" id="input_ytb_link">
<input type="button" value="Confirm!" id="confirm_btn">
<script>
/* String.startsWith(str) */
if (typeof String.prototype.startsWith != 'function'){String.prototype.startsWith = function (str){return this.indexOf(str) == 0;};}

var tag = document.createElement('script'),
    player;
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

function onYouTubeIframeAPIReady() {
    // do nothing...
}
function setPlayer(w, h, url, eventz) {
    if (/^https?:\/\/(www\.)?youtube\.com\/.+\?(.+)?v=(.+)?$/.test(url)) {
        if (document.getElementById('player'))
            document.getElementById('player').outerHTML = '<div id="player"></div>';
        player = undefined;
        document.getElementById('h3').innerHTML = 
                'Processing, please wait a second...';
        var pos = url.indexOf('v='),
            id = url.substring(pos+2,pos+13);
        player = new YT.Player('player', {
                height: h,
                width: w,
                videoId: id,
                events: eventz
        });
    }
}
function onPlayerReady(evt) {
        document.getElementById('h3').innerHTML = 
                evt.target.getVideoData().title;
        //evt.target.playVideo();
}
confirm_btn.addEventListener('click', function(){
    setPlayer('1','1', input_ytb_link.value, {'onReady':onPlayerReady});
});
</script>
</body>
</html>

Thank you for your help!!

Youtube - SecurityError: Blocked a frame with origin “null” from accessing a cross-origin frame

1 Answers

Working demo