YouTube 360 video iframe does not work in mobile browser

Question

I am trying to get an embedded iframe for a YouTube 360 video to play on my mobile site - it works fine on a desktop browser but in the mobile browser I just get the flat stereoscopic view playing back. I can confirm it is definitely a HTML5 player

This is clearly an unresolved problem that others are experiencing. See below posts:

• https://productforums.google.com/forum/#!topic/youtube/7sk92Fs1juk
• Make Youtube 360 degree Videos work on mobile

So I want help with at least one of these two potential questions / solutions.

1) Is it possible to get this working in a mobile browser at all? Google's documentation suggests that it should

For reference - here is my iframe code

<iframe width="1360" height="500" src="https://www.youtube.com/embed/0x16ngo8xfY?autoplay=1&loop=1&playlist=0x16ngo8xfY" frameborder="0" allowfullscreen></iframe>

2) Assuming not, what is the best way to force my iframe to launch in the YouTube mobile app where the 360 video does work properly

Thanks, Alex

Answer 1

Given lack of other responses and in case anyone else finds this, I resorted to this (unfortunately) slightly hacky solution in the interim which seems to work.

if(window.innerWidth < 760){
     $('.video').on('click', function( e ) {
       e.preventDefault();
       //assumes that by forcing window to go to youtube will kick up option to open in app where experience works - plays my full showreel
       window.location = "https://www.youtube.com/watch?v=0x16ngo8xfY&list=PLzSXIFcDqpiCiKXMtXtVIHnmor9uUsEhC&autoplay=1";
     });
  }