Is it possible to link to a 360 YouTube video with ReactVR? - youtube

Question

In the documentation for ReactVR for VideoPano
it demonstrates pointing to a video in the code base.
Is it possible to link to an external link (aka Youtube)?
So instead of video.mp4, it would link to https://www.youtube.com/watch?v=hkgYIr_LWPw&index=1&list=PL-BE7kqSgbEj44peyt5BmLK63kbDp7Rhu
let videoUrl = 'video.webm';
const supportedFormats = NativeModules.VideoModule.supportedFormats;
for (let i = 0; i < supportedFormats.length; i++) {
if (supportedFormats[i] === 'mp4') {
videoUrl = 'video.mp4';
}
}
the rest of the code looks like this.
class WelcomeToVR extends React.Component {
constructor(props) {
super(props);
this.state = {
playerState: new MediaPlayerState({autoPlay: true, muted: true}), // init with muted, autoPlay
};
}
render() {
return (
<View>
<VideoPano
playerState={this.state.playerState}
source={asset(videoUrl, {layout: 'SPHERE'})}
/>
<VideoControl
style={{
height: 0.2,
width: 4,
layoutOrigin: [0.5, 0.5, 0],
transform: [{translate: [0, 0, -4]}],
}}
playerState={this.state.playerState}

Answer 1

Solution 1 (didn't work)
You could try to use an embed the video: https://www.youtube.com/embed/hkgYIr_LWPw. This will give you just the video without other content.
If you need a embedded video, just left click on the video and choose "embed this video" and change the source of your
<VideoPano playerState={this.state.playerState} source={videoUrl} />
Not sure if this could wok because the source code is again HTML, JS and CSS. But you could give it a try. And it didn't work
Solution 2
Download the video using a YouTube downloader1 or other one and use that.
<VideoPano playerState={this.state.playerState}
source={ asset(videoUrl, { layout: 'SPHERE' }) } />
1 No publicity for that tool, just the first result I've found on Google.

Answer 2

YouTube intentionally chooses to obfuscate the direct links to their video files. Linking the embedded player isn't a solution since that thing's a mini web app with streaming logic, not an actual video file.
There's a pretty good write-up on how you could get around that here How do all of these “Save video from YouTube” services work? (probably against their Terms and Conditions though).
It is possible, however, to link to an external video URL, here's how:
Pick a random 3D 360 YouTube video, like this one
Download it, I used savefrom.net but there are many others and host it somewhere http://YOURDOMAIN/YOURVIDEO.mp4
Render a <VideoPano /> in your scene/view
<VideoPano source={{
uri: 'http://YOURDOMAIN/YOURVIDEO.mp4',
stereo: 'BOTTOM_TOP_3D' // this is specific to YouTube 3D videos
}} />
https://facebook.github.io/react-vr/docs/videopano.html