On my website I have a full screen video hero. I need it to show on both desktop and mobile.
On mobile devices, the hero doesn't show the video - the iframe doesn't even exist in the code unless on desktop.
When I use inspect element device type and set it to desktop, it loads correctly and the video plays no matter what resolution the screen is set to.
I've looked at the PHP template and I think that JS must be causing the problem as there's no device sensitive logic.
The page is https://oateymedia.co.uk/
It seems to be a bug with the mbYTPlayer library you're using. Many people have complained that this plugin doesn't appear to work in mobile. See: https://github.com/pupunzi/jquery.mb.YTPlayer/issues?q=is%3Aopen+is%3Aissue+mobile
You can try adding useOnMobile: true, but it seems like this plugin doesn't correctly identify iPhones as mobile, and therefore doesn't work on them. (Even the official demos of this plugin apparently don't work!)
That said, actually using a Youtube video as a background is very likely against Youtube's TOS.
See: https://stackoverflow.com/a/65065810/5243309
and
https://developers.google.com/youtube/terms/required-minimum-functionality#overlays-and-frames