jeudi 26 février 2015

Youtube No 'Access-Control-Allow-Origin' header is present on the requested resource error


I have a strange issue on a site I am working on. I have added a link that opens a youtube video in a popup. It works fine on all pages, but if I do a search, something like http://ift.tt/1zg5KUu, and then attempt to open the video, it won't load and I get this error:



XMLHttpRequest cannot load http://ift.tt/1wqoplQ. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://ift.tt/1zg5N2v' is therefore not allowed access.



I have searched pretty extensively about this issue and the consensus it this is an issue with the header sent by youtube. But as youtube is clearly not blocking remote access to videos, I am at a complete loss as to why this would be happening and also only when there is a query string on the URL.


I have tried changing the link I use to youtube changing it to http from https, adding and removing other portions of the query string, using the short url, really anything I could think of no matter how silly seeming.


Any thoughts would be greatly appreciated.


The video can be opened by click on the "Video of the Day" button toward the top of the page. The link is on all pages.


EDIT: I am using the "Easy Fancybox" plugin to add the fancybox that holds the youtube video.


Here is the html:



<a class="fancybox button-b fancybox-youtube" href="http://ift.tt/1wqoplQ">Video of the Day</a>


Here is the relevant jQuery:



var fb_timeout = null;


var fb_opts = { 'overlayShow' : true, 'hideOnOverlayClick' : true, 'showCloseButton' : true, 'centerOnScroll' : true, 'enableEscapeButton' : true, 'autoScale' : true }; jQuery('a.fancybox-youtube, area.fancybox-youtube, li.fancybox-youtube a:not(li.nofancybox a)').fancybox( jQuery.extend({}, fb_opts, { 'type' : 'iframe', 'width' : 640, 'height' : 360, 'titleShow' : true, 'titlePosition' : 'float', 'titleFromAlt' : false, 'onStart' : function(selectedArray, selectedIndex, selectedOpts) { selectedOpts.href = selectedArray[selectedIndex].href.replace(new RegExp('youtu.be', 'i'), 'http://ift.tt/yWc0AR').replace(new RegExp('watch\?(.)v=([a-z0-9_-]+)(&|&|\?)?(.)', 'i'), 'embed/$2?$1$4'); var splitOn = selectedOpts.href.indexOf('?'); var urlParms = ( splitOn > -1 ) ? selectedOpts.href.substring(splitOn) : ""; selectedOpts.allowfullscreen = ( urlParms.indexOf('fs=0') > -1 ) ? false : true } }) );


this obviously calls the fancybox jQuery plugin defined in the easy fancybox plugin, but I am not experienced enough in writing jQuery plugins to debug that.





Aucun commentaire:

Enregistrer un commentaire