View Any Web-Content As Virtual Reality




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.

Teacher Notes

Teachers! Did you use this instructable in your classroom?
Add a Teacher Note to share how you incorporated it into your lesson.

Step 1: Components and Tools

All that you need for this Instructable is

Google Cardboard or similar

Android Phone


What you need to know (optional),



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.


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">
    <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="">
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="jumbotron.css" rel="stylesheet">
    <script src="js/ie-emulation-modes-warning.js"></script>


    <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>
          <a class="navbar-brand" href="member.php">HeliSmart</a>
        <div id="navbar" class="navbar-collapse collapse">
              <ul class="nav navbar-nav">
                <li class="active"><a href="blah.html">VR Reality</a></li>

      <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 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 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">                                        
                            <a href="#" class="btn btn-success" onclick="sparkSetPos()" Style="margin:15px;margin-top:0px;">Connect</a>
      <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) {


        <p>© LameFreaks 2015</p>

    <script src=""></script>
    <script src="dist/js/bootstrap.min.js"></script>
    <script src="js/ie10-viewport-bug-workaround.js"></script>

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.

Coded Creations

Participated in the
Coded Creations

Mind for Design

Participated in the
Mind for Design



    • Indoor Lighting Contest

      Indoor Lighting Contest
    • Make It Fly Challenge

      Make It Fly Challenge
    • Growing Beyond Earth Maker Contest

      Growing Beyond Earth Maker Contest

    10 Discussions


    3 years ago

    could you post the IDOL API? I have the school science fair coming up, and I want to be the science badass in eight grade.


    3 years ago

    Does this work with games?


    4 years ago on Introduction

    can this work on iphone(jailbroken) or old android tablet?


    4 years ago on Introduction

    Great tut. But its asking me to enter IDOL API key while opening the link. Whats IDOL API??

    1 reply

    4 years ago on Introduction

    For the video, don't you need stereoscopic footage eg. two off-set cameras recording the same thing? So you get that angle differential that gives the illusion of 3D?

    1 reply

    Reply 4 years ago on Introduction

    This is not actually rendering with an off-set, its just like a 3D TV converting normal 2D to 3D (side by side).


    4 years ago

    will give it a try on my card board