Search code examples
htmlgoogle-chromeiframeyoutubemozilla

iframe doesn't properly load for some youtube videos


I isolated iframe element from my React application into html file to open it in browser (html with only iframe in it) and see if it works, and I get the same following problem:

Some youtube videos that I embed are constantly loading and never finish, and when I try to skip to certain part it starts flickering, but shows for split second frame of that exact moment. This problem is resolved if I open it in private browser (I use Chrome, and same thing happens in Mozilla). And weirdly one more thing helps resolving it, if I press cogwheel and press any of the options, for example changing resolution, before pressing exact resolution, video suddenly plays normal. These two solutions are manual, and not good user experience for those videos that don't work as expected.

As mentioned, iframe doesn't work for some videos, and for some it works just fine. Here is the code of an example of video that doesn't work:

<iframe
  width="1045"
  height="435"
  src="https://www.youtube.com/embed/cdx31ak4KbQ"
  title="Inception (2010) Theatrical Trailer #3 [5.1] [4K] [FTD-0706]"
  frameborder="0"
  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
  referrerpolicy="strict-origin-when-cross-origin"
  allowfullscreen
></iframe>

Solution

  • I found the problem cause! It was by YouTube plugin I had coincidentally installed on both Chrome AND Mozilla. Weird how it happened, but once I disabled it, all videos could be loaded in without any problems or flicker.

    Plugin in quesiton was: "Unhook - Remove YouTube Recommended & Shorts"