Some YouTube videos not available on mobile when using Lazysizes

[miguelzafra]

Hello,

I am using LazySizes and is working perfect on desktop. However, on mobile there are a lot of YouTube videos that I see the thumbnail of the video and when I click to play it shows "This video is not available". It only happens with YouTube videos from famous artists' channels but not with all. Looks like a permissions issue, however, If I change data-src to src on the iframes then it works perfectly but of course, lazysizes don't.

I tried using Chrome Mobile and Safari Mobile on the iPhone. On chrome desktop, it is working fine.

Any idea? Thank you!

[aFarkas]

I currently have not much time, but this sounds bad. Could you share one of those non-working urls?

[miguelzafra]

Sure,

you can test it here (is still a work in progress page) on mobile:

https://nsuestudio.com/2020/docs/musicindustry/?name=Peter

Search: "Ana Belén" or "Ana Guerra".

Iframes examples that are not working on mobile: <iframe loading="lazy" class="lazyload" data-src=" https://www.youtube.com/embed/Hc4TIjRZAb8?rel=0&amp;showinfo=0&enablejsapi=1" src="" width="560" height="315" frameborder="0" allowfullscreen>

<iframe loading="lazy" class="lazyload" src=" https://www.youtube.com/embed/TIsfBc65PPU?rel=0&amp;showinfo=0&enablejsapi=1" frameborder="0" allowfullscreen>

Thank you for your time! MZ.

ᐧ

El lun., 23 sept. 2019 a las 21:51, Alexander Farkas (< notifications@github.com>) escribió:

I currently have not much time, but this sounds bad. Could you share one of those non-working urls?

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/aFarkas/lazysizes/issues/705?email_source=notifications&email_token=AEKHR2QUYZJ4UBFXPRJGZLTQLEM53A5CNFSM4IZNTVD2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOD7MBZYA#issuecomment-534256864, or mute the thread https://github.com/notifications/unsubscribe-auth/AEKHR2TTLLROVRHV77DSW63QLEM53ANCNFSM4IZNTVDQ .

--

MIGUEL ZAFRA MANAGING DIRECTOR

New Spanish Office: Calle Preciados 29, 4B (Pza. Callao) 28013, Madrid, Spain +34 672 817 115 Linkedin http://www.linkedin.com/in/miguelzafra | Twitter http://twitter.com/nsuestudio | Instagram https://www.instagram.com/nsuestudio/ http://www.nsuestudio.com

[miguelzafra]

Hello Alexander,

I don't know if you had the chance to see this.

Thank you so much! MZ.

ᐧ

El lun., 23 sept. 2019 a las 21:56, Miguel Zafra (< miguel@nosomosunestudio.com>) escribió:

Sure,

you can test it here (is still a work in progress page) on mobile:

https://nsuestudio.com/2020/docs/musicindustry/?name=Peter

Search: "Ana Belén" or "Ana Guerra".

Iframes examples that are not working on mobile: <iframe loading="lazy" class="lazyload" data-src=" https://www.youtube.com/embed/Hc4TIjRZAb8?rel=0&amp;showinfo=0&enablejsapi=1" src="" width="560" height="315" frameborder="0" allowfullscreen>

<iframe loading="lazy" class="lazyload" src=" https://www.youtube.com/embed/TIsfBc65PPU?rel=0&amp;showinfo=0&enablejsapi=1" frameborder="0" allowfullscreen>

Thank you for your time! MZ.

ᐧ

El lun., 23 sept. 2019 a las 21:51, Alexander Farkas (< notifications@github.com>) escribió:

I currently have not much time, but this sounds bad. Could you share one of those non-working urls?

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/aFarkas/lazysizes/issues/705?email_source=notifications&email_token=AEKHR2QUYZJ4UBFXPRJGZLTQLEM53A5CNFSM4IZNTVD2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOD7MBZYA#issuecomment-534256864, or mute the thread https://github.com/notifications/unsubscribe-auth/AEKHR2TTLLROVRHV77DSW63QLEM53ANCNFSM4IZNTVDQ .

--

MIGUEL ZAFRA MANAGING DIRECTOR

New Spanish Office: Calle Preciados 29, 4B (Pza. Callao) 28013, Madrid, Spain +34 672 817 115 Linkedin http://www.linkedin.com/in/miguelzafra | Twitter http://twitter.com/nsuestudio | Instagram https://www.instagram.com/nsuestudio/ http://www.nsuestudio.com

--

MIGUEL ZAFRA MANAGING DIRECTOR

New Spanish Office: Calle Preciados 29, 4B (Pza. Callao) 28013, Madrid, Spain +34 672 817 115 Linkedin http://www.linkedin.com/in/miguelzafra | Twitter http://twitter.com/nsuestudio | Instagram https://www.instagram.com/nsuestudio/ http://www.nsuestudio.com

[leanne616]

This is also happening on my site. It works perfectly on desktop for Vimeo iframe embeds but returns a privacy error or a blank space on iPhones. Any help on this would be much appreciated!

[tan-allan]

I was able to resolve the issue by changing this:

Comment out code: elem.contentWindow.location.replace(src);

Replace with: elem.src = src;

Resulting code: var changeIframeSrc = function(elem, src){ try { elem.src = src; //elem.contentWindow.location.replace(src); } catch(e){ elem.src = src; } };

[aFarkas]

@tan-allan I can not change this like this because changing the src of an `iframe´ adds a history entry to the browser (at least Firefox). If you are willing to do so you can write something like this:

// <iframe data-iframe-src="yt-src"></iframe>
window.addEventListener('lazybeforeunveil', ({target}) => {
   if(target.dataset.iframeSrc) {
       target.src = target.dataset.iframeSrc;
   }
});

[sudharsan-p]

@aFarkas What if we remove the iframe and re-construct as mentioned here ?