Youtube videos start in lower quality

[eugenio11]

Hello,
I embedded a YT video in a web page, here is my code

<div id="video_container" class="container">
<div class="vid youtube " style="background-image:url(............)" ytSrc=".............."></div>
</div>

When I play the video for the first time (after having cleaned the browser cache), the video by default is played at a very low quality (I guess it's 360p or 480p) but the YT player says it's 720p60. It's obviously not, in fact when I manually select 720p60 the video starts playing in (real) 720p60.

The problem is not the default 360p (I know it can happen and depends on many factors) but the fact the player claims it's 720p, which can be confusing for the users.

I can see the problem on MacOS with both Safari and Chrome.

Any idea? Thanks!

[henrygd]

My guess is that it auto selects a lower quality on first load, then auto adjusts to a higher quality, but is still playing the lower quality buffer that was loaded before getting to the higher quality segment it's downloading. If you don't manually select a higher res and just let it play for a minute, does it eventually adjust by itself?

[redtopia]

Just a guess... maybe YouTube selects lower resolutions for smaller port dimensions. As an experiment, try opening the youtube iframe url into it's own window in a larger size and see what happens.

[eugenio11]

@henrygd thanks, you are right, that's exactly what happens, after a while (or if I skip to a part that hasn't be buffered yet) it adjusts by itself! Do you think I can prevent this behaviour? On the final user side I guess it's pretty weird to see the wrong quality (even if it is just for while). Also, according to my experiments, it only happens if I use this library, if I embed the video using the YT iframe code, it doesn't.

@redtopia thanks for your reply, I am not sure if understood what you mean with "into it's own window", though. If I embed the video using the YT code, I don't see the problem but that's not what you are asking I guess.

PS I realized the code I included in my original post was not showed, fixed.

[redtopia]

What I was suggesting was to grab the src attribute of the iframe being created in BigPicture and open that in a new window and then test its behavior. I would also compare the iframe DOM element with the embed code given from YouTube, which is not responsive btw. What's the difference?

[henrygd]

according to my experiments, it only happens if I use this library, if I embed the video using the YT iframe code, it doesn't.

Could be due to the library loading the iframe on demand with autoplay rather than letting it sit around for a bit before someone presses play. Maybe it uses that time to figure out the connection speed. Seems unlikely though.

Can you go here and test these embeds to see if you have the same issue? Please open / close a new private window for each test.

https://bpissue.vercel.app/

Edit: Also, when you load the video through this library, are the dimensions of the iframe at least 1280px width?

[eugenio11]

@redtopia Ok, I understand.
The iframe created in BP has this src
https://www.youtube-nocookie.com/embed/..XXX..?html5=1&rel=0&playsinline=1&autoplay=1

the one from the youtube code is

<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/..XXX.." title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

With both of them, if I put the SRC url only in the browser, I see the problem.

I've realized that if I open a private window I can see the problem also on youtube.com: the video starts at 480p but the player claims it's 720p, after a while the quality of the video increases.

@henrygd I don't see the problem with the tests you sent me.

After having clicked play I see a <div id="bp_container" element that is 1280x720

Thanks!

[henrygd]

Perhaps this is related to youtube-nocookie? The tests I made are using the regular youtube.com url. Do you see a difference when switching between the two?

[eugenio11]

I tried and I see no difference, same issue.

[henrygd]

I added a couple more tests to that page so you can check if there's any difference opening in a lightbox.

After doing some googling, it seems like this is common behavior for youtube if the user hasn't preselected a preferred quality. Probably to get the video playing as quickly as possible. So I don't know if there's anything that can be done on our end. I would be happy to implement a solution if there is one, but I haven't found anything.