Marzipano - Video

by AsciiSmoke

HTML

<!DOCTYPE html>
<html>

  <head>
    <title>Embedded Hotspots | Marzipano</title>
    <meta name="description" content="Use embedded hotspots to overlay content from different sources on a 360° image (e.g. YouTube, Google Maps, Twitter)." />
    <meta name="viewport" content="target-densitydpi=device-dpi, width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, minimal-ui" />
    <style>
      @-ms-viewport {
        width: device-width;
      }

    </style>
    <link rel="stylesheet" href="//www.marzipano.net/demos/common/reset.css">
    <link rel="stylesheet" href="https://github.com/google/marzipano/raw/master/demos/embedded-hotspots/style.css">
  </head>
  <div id="pano"></div>

  <!-- Different sources -->
  <div id="iframespot">
    <div class="message">Select something to play!</div>
  </div>

  <ul id="iframeselect">
    <li data-source="googleMaps">Google Maps</li>
    <li data-source="youtube">YouTube</li>
    <li data-source="youtubeWithControls">YouTube (UI)</li>
    <li data-source="koloreyes">KolorEyes</li>
  </ul>

  <script src="https://www.marzipano.net/build/marzipano.js"></script>

</html>

CSS

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
  -ms-content-zooming: none;
}

html,
body {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  overflow: hidden;
  font-family: helvetica, sans-serif;
}

#pano {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

[data-source] {
  display: inline-block;
  cursor: pointer;
}

#iframespot {}

#iframeselect {
  position: absolute;
  width: 120px;
  margin-left: -140px;
  border-radius: 10px;
  overflow: hidden;
  opacity: 0.95;
}


#iframeselect li {
  width: 100%;
  padding: 1em;
  font-size: 12px;
  text-align: center;
  background-color: #444;
  color: #ddd;
  transition: .3s background-color ease-in-out,
    .3s color ease-in-out;
}

#iframeselect li:hover {
  background-color: #666;
  color: #fff;
}

#iframespot {
  background-color: #444;
  position: relative;
  width: 1280px;
  height: 480px;
}

#iframespot .message {
  text-align: center;
  padding-top: 190px;
  font-size: 70px;
  color: #ddd;
}

#adsense {
  background-color: #fff;
  color: #000;
}

.adsense-fallback {
  padding: 1em;
  position: absolute;
  top: 0;
  left: 0;
}

JavaScript

/*
 * Copyright 2016 Google Inc. All rights reserved.
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *   http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */
'use strict';

// Create viewer.
var viewer = new Marzipano.Viewer(document.getElementById('pano'));

// Create source.
var source = Marzipano.ImageUrlSource.fromString(
  "//www.marzipano.net/media/outdoors/{z}/{f}/{y}/{x}.jpg", {
    cubeMapPreviewUrl: "//www.marzipano.net/media/outdoors/preview.jpg"
  });

// Create geometry.
var geometry = new Marzipano.CubeGeometry([{
    tileSize: 256,
    size: 256,
    fallbackOnly: true
  },
  {
    tileSize: 512,
    size: 512
  },
  {
    tileSize: 512,
    size: 1024
  },
  {
    tileSize: 512,
    size: 2048
  },
  {
    tileSize: 512,
    size: 4096
  }
]);

// Create view.
var limiter = Marzipano.RectilinearView.limit.traditional(4096, 100 * Math.PI / 180);
var view = new Marzipano.RectilinearView(null, limiter);

// Create scene.
var scene = viewer.createScene({
  source: source,
  geometry: geometry,
  view: view,
  pinFirstLevel: true
});

// Display scene.
scene.switchTo();

// Get the hotspot container for scene.
var container = scene.hotspotContainer();

// Create hotspot with different sources.
var billboardHotSpot = container.createHotspot(document.getElementById('iframespot'), {
  yaw: 0.0335,
  pitch: -0.102,
}, {
  perspective: {
    radius: 1640,
    extraTransforms: "rotateX(5deg)"
  }
});


container.createHotspot(document.getElementById('iframeselect'), {
  yaw: -0.35,
  pitch: -0.239
}, {
 ...