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 end of this article.
The two most important aspects you need to change are:
Add the viewport meta tag
<meta name="viewport" content="width=device-width, initial-scale=1.0">to theheaderof the HTML page.In the body, add the attribute
scrolling="no"to theiframetag.
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.
There are five settings 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 about each setting below:
Show navigation panel
Rotate on load
Show scenes panel
Autostart player
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.
The embed code snippet
In general, the iframe for embedding the project looks as the following. for “src” you will insert the share link of your personal project. You can customize the view with the available settings:
<iframe id="holobuilderIframe" width="800" height="600" src="https://app.holobuilder.com/app/?p=xxx0&o=260" border="0" frameborder="0" style="border: 0" allowfullscreen mozallowfullscreen webkitallowfullscreen title="HoloBuilder.com"></iframe>
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:
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.
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.
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.
What might also interest you: