Version 3.5.2 youtube fullscreen not available in chrome

[jackpi2018]

Hi. i have an issue about the fancybox in version 3.5.2. Youtube fullscreen button not available when browsing in Chrome. (but in Firefox, Edge, IE it works). It works in the fancybox demo page (https://fancyapps.com/fancybox/3/).
However when i do it locally it cannot work.
I have tried the older version which is 3.4.1 it works locally in Chrome. After version 3.4.2 it start not working in Chrome.

[fancyapps]

Hi,

Do not test video/iframes/ajax locally, you have to use web server to get full functionality due to browser security policies.

[jackpi2018]

Hi I have try it on the web server but it has the same issue at chrome as well.
Below is the code I test in the web server. Anything I miss out?
insert fancybox css in head
link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.2/jquery.fancybox.min.css"

`

<title>Test Fancy Box</title>

<a href="https://source.unsplash.com/IvfoDk30JnI/1500x1000" data-fancybox="ty" data-caption="&lt;b&gt;Single photo&lt;/b&gt;&lt;br /&gt;Caption can contain &lt;em&gt;any&lt;/em&gt; HTML elements">
    <img src="https://source.unsplash.com/IvfoDk30JnI/240x160" />
</a>

<a href="https://source.unsplash.com/0JYgd2QuMfw/1500x1000" data-fancybox="ty" data-caption="This image has a simple caption">
    <img src="https://source.unsplash.com/0JYgd2QuMfw/240x160" />
</a>

<a href="https://source.unsplash.com/xAgvgQpYsf4/1500x1000" data-fancybox="ty">
    <img src="https://source.unsplash.com/xAgvgQpYsf4/240x160" />
</a>
<a data-fancybox="ty" href="https://www.youtube.com/watch?v=_sI_Ps7JSEk">
    <img class="card-img-top img-fluid" src="http://img.youtube.com/vi/_sI_Ps7JSEk/mqdefault.jpg" />
</a>
</p>

<!-- JS -->
<script src="//code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.2/jquery.fancybox.min.js"></script>

`

[fancyapps]

After some experimenting, I discovered that Google has recently made some changes (they are quite famous about their privacy policies) and now they do not allow full-screen for embeds that are using src="//www.youtube.com... or src="//www.youtube-nocookie.com.... I think this is because they are now forcing https for youtube and the web (https://developers.google.com/web/updates/2016/10/avoid-not-secure-warn).

So, changing embeds to src="https://www.youtube.com seems to fix this issue and this will be included in the next update. Thanks for bringing this up.

[jackpi2018]

ok thank you. may i know any alternative solution for current latest version(3.5.2)?

[fancyapps]

Try setting

$.fancybox.defaults.media.youtube = { url : 'https://www.youtube-nocookie.com/embed/$4' };

[jackpi2018]

Sorry may i ask where should i put this command? is this a global functions apply to all videos?

[fancyapps]

1. Anywhere (obviously, not on chair or floor, but on your page or external js file, it depends on how you organize your code);
2. Yes, because this snippet just changes defaults for template used to create video embed code.

[jackpi2018]

ok. thank you so much. it works.

[ozgunmustafa]

$.fancybox.defaults.media.youtube = { url : 'https://www.youtube-nocookie.com/embed/pCZqcp-jZhw' };
this code not working. I see this message " Video unavaliable"

[fancyapps]

Your code is strange, check docs on how to use API.

…

On Wed, 7 Apr 2021 at 10:05, ozgunmustafa ***@***.***> wrote: $.fancybox.defaults.media.youtube = { url : ' https://www.youtube-nocookie.com/embed/pCZqcp-jZhw' }; this code not working. I see this message " Video unavaliable" — You are receiving this because you modified the open/close state. Reply to this email directly, view it on GitHub <#2132 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAIBWZKUUKMTE5A7EDXRFSLTHP7Z7ANCNFSM4GF3OAMQ> .

[acwolff]

On my website the full screen button works fine with Chrome, as you can see here:
https://www.andrewolff.nl/FotoSerie/Algarve/Videos/index.html