YouTube 360 video iframe does not work in mobile b

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

I was able to get 360 vids working in an Android WebView by changing the user-agent to match my MacBook. Here's the one i used:

Mozilla/5.0 (Macintosh; Intel Mac OS X 10_10_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/50.0.2661.86 Safari/537.36

The full implementation consists of VideoJS and the YouTube extension, which uses an iframe. The touch/dragging isn't perfect, yet, but it was a step in the right direction.

Perhaps you can override the JS navigator's userAgent to achieve the same result.

Answer 2

According to YouTube, 360 video will work on "the latest version of Chrome, Opera, Firefox, or Internet Explorer on your computer":

https://support.google.com/youtube/answer/6178631

This means we can use User Agent sniffing, which is definitely suboptimal but slightly better than checking the innerWidth as suggested by AlexHandy1.

function browserSupports360 () {
  // YouTube supports 360 videos in a limited set of browsers,
  // see https://support.google.com/youtube/answer/6178631

  var ua = navigator.userAgent;

  // No mobile browser is supported at the moment
  if (/Mobile/.test(ua) || /Tablet/.test(ua)) return false;

  // Chrome >= 40
  if (/Chrome\/[^123][0-9]/.test(ua) && !/Edge\//.test(ua) && !/OPR\//.test(ua)) return true;

  // Firefox >= 40
  if (/Firefox\/[^123][0-9]/.test(ua)) return true;

  // Microsoft Edge
  if (/Edge\//.test(ua)) return true;

  // Opera >= 30
  if (/OPR\/[^12][0-9]/.test(ua)) return true;

  return false;
}

There is an open question on the YouTube Help Forum asking if it's possible to use feature detection instead, you can upvote it in the hope someone from YouTube will look at it:

https://productforums.google.com/forum/#!topic/youtube/EON00C4h9w4

Answer 3

It is a simple , See inspect element (chrome) at youtube on 360 video. You will see this is not video player . It is a canvas with webgl .

When google wants to work on mobile that you can play it. Before that happen you must make your own 360 video player. sorry on my bad en!

Look at :

http://threejs.org/examples/#canvas_geometry_panorama

You must make webgl panorama app with streaming textures and yuo will get 360 video . You must use sphere not cube variant of panorama.

You can not use video tag - 100% .

Fixing on firefox desktop : got to about:config on address bar in firefox and setup webgl-disabled to false .... Even if you install update to last version on firefox still must do this. If you uninstall - install firefox fresh version i thing webgl is enabled by default.

Answer 4

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";
     });
  }