Hello, I install the fancybox plugins, if I apply Pagination enabled with manual or automatic transition and AJAX, the fancybox function can only be worked on the first page. If I apply the Pagination enabled with manual transition and page reload, fancybox can work on every page, any solution that I can apply the AJAX?
I am setting this ticket as waiting for a response until you provide us with a copy of your website to check why is the Fancybox not working for youtube videos after paginating the view with AJAX.
It seems that we can fix the fancybox issue on Youtube videos by adding the class "iframe" to the <a> tag handler.
But, I encountered another issue. Check this screenshot hidden link
Refused to display '<em><u>hidden link</u></em>' in a frame because it set 'X-Frame-Options' to 'sameorigin'.
I think that it has something to do with server security. I wanted to add custom code to update that, but the server security does not allow me to update files.
As I explained while having the chat, I'll need to take a copy of your website and test it against our servers, this will let us check if it is a server related issue, and at the same time, it will be needed if I can't find a solution and I had to escalate this ticket. Please let me know if I can take a copy.
I remember that we have fixed the fancy box for images while in chat. Is that correct or are you having troubles with image fancyboxes too? If yes, please let me know exactly what posts to test with, If you can record a screencast of your tests that would be great.
I duplicated the production site to this dev.vwcm.hk, you can feel free to test it. Or you need me to duplicate the site and send you the image? Please advise what I should do.
I just wanted your approval to take a copy of your website. As you are willing to provide one, I am already running a migration of this website to our online platform. I'll let you know what I will find.
It seems that the AJAX calls changes the referrer of the page to the full URL of the page instead of the site URL which creates an issue when the strict policy for same-origin requests is enabled.
As a workaround, we need to change the URLs of the videos to a less restricted URL. According to this article we need to use the /embed/ endpoint for the URL hidden link
So I suggest one of the following solutions:
- Changing the URL in the browser using Javascript by adding the following code to the view:
jQuery(function($){
$('.fancybox-youtube').each(function(){
var $this = $(this);
var url = $this.attr('href');
if ( /https:\/\/youtu.be\//.test(url) ) {
$this.attr('href', url.replace('<em><u>hidden link</u></em>','<em><u>hidden link</u></em>'))
}
$this.fancybox();
})
});
-Changing the URL in the server, by wrapping the URL shortcode inside a custom shortcode "youtube". Add the following code to your theme's functions.php file:
