There is has been recently a lot of excitement around the Virtual Reality and that is all because major companies like Oculus Rift and input devices such as the Leap Motion, PrioVR, Sixense Stem, have been designing new and High Definition experiences. And things got even better when Google released Google cardboard at keynote 2014 and it became the cheapest alternative to get all the VR experience.

So I have been having fun with the Google Cardboard for quite some while, the number of applications on the play-store keeps on rising. But while searching for some applications and videos over the Internet, an idea strikes me of o converting most of the web-content into virtual reality.

After a bit of research I found that it was not so hard after all, with just some bit of JavaScript magic we could stream any content to VR so now its not just You Tube you get to watch in VR you can also stream DaliyMotion or Vimeo and lots more.

Step 1: Components and Tools

All that you need for this Instructable is

Google Cardboard or similar

Android Phone

Computer

What you need to know (optional),

JavaScript

HTML and CSS

Bootstrap (To get a good looking UI)

You actually don't need to learn HTML and CSS, its only for those of you who are curious to improve the design or experiment on it.

Step 2: JavaScript

Like I mentioned earlier this application uses JavaScript and HTML to convert a normal web page to side by side 3D to be viewed in the virtual reality. If you are not interested to experiment with the code, you can skip this code and move with the deployment.

An iframe tag is used to include another HTML document in a web page or current HTML document.

With the HTML iframe tag,

<iframe src="url" ></iframe>

where we can view a web-page in a web-page and we need to pass a parameter, in place of the "url" with the actual URL of the page you want to view. Using two of this tag each a clone of the other and also with a width of 50% of the entire page width.

<iframe src="url" style="width:50%" id="frame1"></iframe>

<iframe src="url" style="width:50%" id="frame2"></iframe>

Step 3: JavaScript Width and Height

Now its time to add some width and height so that it fits any page size,

<iframe id="frame1"src="URL" width="49%" height="100%" style="margin:none;><iframe>

<iframe id="frame2"src="URL" width="49%" height="100%" style="margin:none;><iframe><br>

All you have to so is enter a URL in both the tags and make sure both the tags are same.

Or you can use JavaScript to clone the URL so you don't have to to type it twice.

document.getElementById("frame2").src=document.getElementById("frame1").src

In the next step lets start with bootstrap to make the UI better.

Step 4: BootStap

By now you should have got the VR going but if your looking to add some more color to your UI, its now the time you can do it. I used bootstrap to design the UI.

<!DOCTYPE html>

<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <title>VR</title>
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="jumbotron.css" rel="stylesheet">
    <script src="js/ie-emulation-modes-warning.js"></script>
  </head>

  <body>

    <nav class="navbar navbar-inverse navbar-fixed-top">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="member.php">HeliSmart</a>
        </div>
        <div id="navbar" class="navbar-collapse collapse">
              <ul class="nav navbar-nav">
                <li class="active"><a href="blah.html">VR Reality</a></li>
                </li>
              </ul>
            </div>
      </div>
    </nav>

      <div class="jumbotron hidden-sm hidden-xs" style="padding-bottom:200px;">
        <div class="container">

          <h2>  <b>Sorry</b> </h2>
          <p>This can be only viewed in the a <b>Mobile phone</b>, Make sure you have also have java enabled. </p>
          <p><b>Contact US</b> if you think everything is fine.</p>
          
        </div>
      </div>
      <div class="jumbotron hidden-md hidden-lg" style="padding-bottom:200px;">
        <div class="container">
          <h2><b>Works best in a VR viewer.</b></h2>
           <div class="container">    
        <div id="loginbox" style="margin-top:50px;" class="mainbox col-md-6 col-md-offset-3 col-sm-8 col-sm-offset-2">                    
            <div class="panel panel-info" >
                    <div class="panel-heading">
                        <div class="panel-title">Enter Video Url</div>
                    </div>     

                    <div style="padding-top:30px" class="panel-body" >

                        <div style="display:none" id="login-alert" class="alert alert-danger col-sm-12"></div>
                                    
                            <div style="margin-bottom: 25px" class="input-group">
                                        <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
                                        <input type="text" class="form-control" id="url" value="" placeholder="URL">                                        
                                    </div>
                                    </div>        
                            <a href="#" class="btn btn-success" onclick="sparkSetPos()" Style="margin:15px;margin-top:0px;">Connect</a>
                        </div>                     
                    </div>
        </div>
      </div>
      <iframe id="frame1"src="#" width="49%" height="100%" style="margin:none;"></iframe>
      <iframe id="frame2"src="#" width="50%" height="100%" id="right"></iframe>
      <script type="text/javascript">
        function sparkSetPos(obj) {
          document.getElementById("frame1").src=document.getElementById("url").value;
          document.getElementById("frame2").src=document.getElementById("url").value;
                  
        }


      </script>

    
      <footer>
        <p>© LameFreaks 2015</p>
      </footer>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <script src="dist/js/bootstrap.min.js"></script>
    <script src="js/ie10-viewport-bug-workaround.js"></script>
  </body>
</html><br>

Step 5: Deployment

Download the Code in the attachment, and copy it to the root folder of the your phone SD card. Make sure you also download the bootstrap zip file and add it to the project. Thats it, now you can open the file (vr.html) and enter a valid URL and you get the page content in virtual reality.

Here is the link to the Github page.

Note: Websites like Google and Facebook, wont work as a URL for ifame.

Here is a list of applications I like,

If you encounter any problem leave a comment below. If you are interested in links to even more content you can PM me.