Embedding your HoloBuilder projects

With HoloBuilder you can easily embed your projects in your personal website with the provided iframe for the HoloPlayer. The main challenge is to make these iframes responsive. To have the best embedding results for your projects also on mobile devices, you can follow the instructions below or find the complete code at the bottom.

The two most important aspects you need to change are:

1) Add the viewport meta tag <meta name="viewport" content="width=device-width, initial-scale=1.0"> to the header of the HTML page.
2) In the body, add the attribute scrolling="no" to the iframe tag.

The ‘Advanced’ sharing settings

The iframe code snippet needed for embedding your project can be found in the ‘Advanced‘ sharing setting. Change between ‘Basic’ sharing and ‘Advanced’ sharing by clicking on the corresponding button at the top of the ‘Share Project’ dialog box as illustrated in the image below. Learn more on your custom sharing options here.

There are five setting for individual customization of the player view. The sharing settings are only applied to the fullscreen link as well as the embed code below. Learn more on each setting:

    1. Show navigation panel
    2. Rotate on load
    3. Show scenes panel
    4. Autostart player
    5. Show control panel

Furthermore, you can set a different starting scene when embedding the same project multiple times. Open the drop-down menu in the ‘Advanced’ sharing settings and select the desired start scene for your embed code. For each starting scene or change of player settings, the embed code will change and you will have to adjust the embedded code in your website to apply the changes. If you desire to embed the same project with different project settings, e.g. a different start scene, you can do so by copying and inserting the corresponding code.

Advanced sharing and embedding settings

The page setup

As with any other website, you need to setup the page in general. If you already have an existing website, please add the highlighted code to add responsiveness when viewing the embedded project on your mobile device.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- the following line is important -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!-- this page titel can be anything you like-->
<title>Reponsive iFrame</title>
<!--include your style settings here-->
<style>
...
</style>
</head>
<body>
...
</body>
</html>

In general, the viewport element gives the browser instructions on how to control the page’s dimensions and scaling, while the width=device-width part sets the width of the page to follow the screen width of the device. The device’s screen may vary depending on the device. Last but not least, the attribute initial-scale=1.0 sets the initial zoom level when the page is first loaded by the browser.

To avoid having the user scroll horizontally, there are three more aspects you should keep in mind when setting up your responsive page with the project iFrame:

  1. Do not use large fixed width elements as they can exceed the width of the viewport. Always adjust the width to fit into the defined viewport.
  2. Do not let the content rely on a particular viewport width to render well, as any particular viewport width in CSS pixels and the screen dimension vary widely between any devices.
  3. Use CSS media queries for styling of varying screen sizes. Media queries can help defining special styles depending on the screen size.

The style settings

As we already handled the viewport as described above, we can now make the iFrame responsive within the style settings with a little CSS. It is important that you later on also apply the aspect ratio classes to your iFrame tag as otherwise, the iFrame could disappear. See also Ben Marshalls blog post on responsive iFrames for a more detailed subscription.

<style>
/* Details about the following lines at https://benmarshall.me/responsive-iframes/ */
.responsive-iframe {
position: relative ;
overflow: hidden;
}
/* 16x9 Aspect Ratio e.g. 1920x1080 */
.responsive-iframe-16x9 {
padding-bottom: 56.25%;
}
/* 4x3 Aspect Ratio e.g. 800x600*/
.responsive-iframe-4x3 {
padding-bottom: 75%;
}
.responsive-iframe iframe {
position: absolute;
top:0;
left: 0;
height: 100%;
/* Details about the following 2 lines at http://stackoverflow.com/a/23083463 */
width: 1px;
min-width: 100%;
}
</style>

The container

To make the container responsive, specify the container’s position to be relative to allow for absolute positioning of the iframe within it. Setting the overflow as hidden will avoid content protruding the defined container to be hidden and not mess up your layout.

Defining separate classes for different ratios

The padding-bottom specifies the bottom padding in percentage of the width of the containing element, here your iframe with the HoloBuilder project. The value is calculated based on the aspect ratio of your content. To find the aspect ratio of a container, use this formula: height ÷ width = aspect ratio. Instead of adding it to the intrinsic-container class, add separate classes that can be appended to that element depending on the type of content you’re embedding.

Finally, you need to set the top and left properties so the iframe get’s put in the right place. Set the width and height to 100% so the iframe takes up 100% of the above-defined container’s space.

 

The body including the iFrame

Add the following attributes to your iframe tag in the body. Do not forget to set the class for your iframe wrapped in a div tag.

<body>
<!-- IFrame must be wrapped in a div -->
<div class="responsive-iframe responsive-iframe-4x3"> /* Set the class for your iframe */
<iframe 
id="holobuilderIframe"
width="800" height="600" /* You can also set height and width to 0 as these are already given by the container */
src="https://holobuilder.com/app/index.html?e=1&p=5000202370940928#player/5000202370940928?options=257&scene=14881912949370"
border="0"
frameborder="0"
allowfullscreen
mozallowfullscreen
webkitallowfullscreen
title="Virtual Reality made with HoloBuilder"
scrolling="no" /* this line is important for ios */
>
</iframe>
</div>
</body>

To make this solution also applicable for iOS, please add the attribute scrolling="no" to the iframe tag. Now you should be all set and free to add your personal stylings as you are used to on your website.

The complete code

Find the complete source code below:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- the following line is important -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!-- this page titel can be anything you like-->
<title>Reponsive iFrame</title>
<!--include your style settings here-->
 
<style>
/* Details about the following lines at https://benmarshall.me/responsive-iframes/ */
.responsive-iframe {
position: relative ;
overflow: hidden;
}
/* 16x9 Aspect Ratio e.g. 1920x1080 */
.responsive-iframe-16x9 {
padding-bottom: 56.25%;
}
/* 4x3 Aspect Ratio e.g. 800x600*/
.responsive-iframe-4x3 {
padding-bottom: 75%;
}
.responsive-iframe iframe {
position: absolute;
top:0;
left: 0;
height: 100%;
/* Details about the following 2 lines at http://stackoverflow.com/a/23083463 */
width: 1px;
min-width: 100%;
}
</style>
 
</head>
<body>

<!-- IFrame must be wrapped in a div -->
<div class="responsive-iframe responsive-iframe-4x3">
<iframe 
id="holobuilderIframe"
width="800" height="600"
src="https://holobuilder.com/app/index.html?e=1&p=5000202370940928#player/5000202370940928?options=257&scene=14881912949370"
border="0"
frameborder="0"
allowfullscreen
mozallowfullscreen
webkitallowfullscreen
title="Virtual Reality made with HoloBuilder"
scrolling="no" <!-- this line is important for ios -->
>
</iframe>
</div>

</body>

<html>

Support

If you still have any questions about embedding the HoloPlayer in your website or even HoloBuilder in general, please let us know by e-mail at support@holobuilder.com or via our integrated live chat on holobuilder.com.

Try HoloBuilder  for your 360° projects!

Leave a Reply