I love using colorboxjs for my projects. Its a simple little popup colorbox script that works well on mobile devices. Lately I have been playing with using colorbox to load youtube videos. Recently I noticed that the videos were not loading when I pasted the url in directly from youtube, instead I was getting a “X-Frame-Options set to SAMEORIGIN” error.
The fix to this is pretty simple and is taken from Colorbox’s documentation:
[dt_code]
$(“.youtube-colorbox”).colorbox({
iframe: true,
innerWidth:640,
innerHeight:390,
href:function(){
var videoId = new RegExp(‘[\\?&]v=([^&#]*)’).exec(this.href);
if (videoId && videoId[1]) {
return ‘http://youtube.com/embed/’+videoId[1]+’?rel=0&wmode=transparent’;
}
}
});
[/dt_code]
In this case I have used a youtube-colorbox selector but you can use whatever selector you want. The main this to notice is this part:
[dt_code]
href:function(){
var videoId = new RegExp(‘[\\?&]v=([^&#]*)’).exec(this.href);
if (videoId && videoId[1]) {
return ‘http://youtube.com/embed/’+videoId[1]+’?rel=0&wmode=transparent’;
}
}
[/dt_code]
Essentially what this does is replace your copy and pasted youtube url with the embed version (which allows cross domain requests).
