Safari(ios): Embed Youtube Video Always Plays In Low Quality

I need to play YouTube Videos with at least 720p resolution on my mobile tv web app, but safari plays them always with the lowest quality, that sucks. I tried a lot of solutions t

Solution 1:

I ran into these exact same issues today and ultimately came up with a bit of a hack that worked for my specific needs. The trick is to double the size of one of the parent elements that's wrapping the iframe embed and then to scale it down again using a transform. For example:

.video-wrap {
  width: 200%; 
  transform: scale(0.5);
  transform-origin: left top;
}

Alternatively, you can also specify an exact width/height for it if you're trying to get exactly 360, 720, 1080, etc.

The only major downside to this "solution" is that it will also scale down the whole video player UI. In my case this was acceptable because there are other UI elements that allow the user to control the video.

I'm also only applying these styles to smaller screens based on css breakpoints, because the larger screens pull in the right resolution video regardless.

I really hope YouTube will eventually fix their setPlaybackQuality function, but in the mean time, I hope this helps someone out.