I-frame scale in presentation

Hi

I have been looking to embed an Iframe of the viewer within a presentation slide deck produced in Slidev which uses Vue.js in the background.

Its easy to get to work :+1: however the scaling of the viewer seems a bit off. I feel like its assuming a smaller screen than is actually available so rendering larger controls and lower resolution in the viewer.

I’m no expert on front end stuff, so if any one has any thoughts that would be greatly appreciated

Thanks

slides.md
(definition of the slide, I’m using the shorthand approach below but the same occurs when using html syntax)

---
layout: iframe-left

# the web page source
url: https://app.speckle.systems/projects/47779a01ed/models/xxxxxxxxxxxx#embed=%7B%22isEnabled%22%3Atrue%7D
---

# Speckle Example

- This is an example project exported from revit
- Isn't it great how i can add this to my presentation
- and i can review and edit the model and comments in real time
- [Speckle](https://speckle.systems/) is a great tool for sharing 3D models

Screen shot of rendered slide

Inspected iframe element:

<div class="viewer special-gradient absolute z-10 overflow-hidden w-screen h-[calc(100dvh-3.5rem)]"><div class="absolute w-full h-full"><div id="renderer" style="display: block; width: 100%; height: 100%;"><canvas data-engine="three.js r140" width="490" height="496" style="display: block; width: 490px; height: 496px; touch-action: none;"></canvas></div></div><div class="absolute w-full h-full pointer-events-none overflow-hidden"><!----><div data-v-2a0edf91="" class="relative z-[11]"><div data-v-2a0edf91="" class="absolute pointer-events-auto" style="display: none; opacity: 1; transition: 100ms;"><div data-v-2a0edf91="" class="relative"><button data-v-2a0edf91="" class="transition bg-foundation shadow hover:shadow-xl flex -space-x-2 items-center p-[2px] rounded-tr-full rounded-tl-full rounded-br-full"><div data-v-2a0edf91="" class="flex -space-x-2"><div class="flex flex-wrap overflow-hidden -space-x-2  h-8"><div class="text-foreground-on-primary flex shrink-0 items-center justify-center overflow-hidden uppercase transition rounded-full w-8 h-8 text-body-2xs bg-info-darker border-2 border-foundation"><div class="flex h-full w-full select-none items-center justify-center">AR</div></div></div><!----></div><!----></button></div></div><!----></div><div data-v-2a0edf91="" class="relative z-[11]"><div data-v-2a0edf91="" class="absolute pointer-events-auto" style="display: none; opacity: 1; transition: 100ms;"><div data-v-2a0edf91="" class="relative"><button data-v-2a0edf91="" class="transition bg-foundation shadow hover:shadow-xl flex -space-x-2 items-center p-[2px] rounded-tr-full rounded-tl-full rounded-br-full"><div data-v-2a0edf91="" class="flex -space-x-2"><div class="flex flex-wrap overflow-hidden -space-x-2  h-8"><div class="text-foreground-on-primary flex shrink-0 items-center justify-center overflow-hidden uppercase transition rounded-full w-8 h-8 text-body-2xs bg-info-darker border-2 border-foundation"><div class="flex h-full w-full select-none items-center justify-center">AR</div></div></div><!----></div><!----></button></div></div><!----></div><div data-v-2a0edf91="" class="relative z-[11]"><div data-v-2a0edf91="" class="absolute pointer-events-auto" style="display: none; opacity: 1; transition: 100ms;"><div data-v-2a0edf91="" class="relative"><button data-v-2a0edf91="" class="transition bg-foundation shadow hover:shadow-xl flex -space-x-2 items-center p-[2px] rounded-tr-full rounded-tl-full rounded-br-full"><div data-v-2a0edf91="" class="flex -space-x-2"><div class="flex flex-wrap overflow-hidden -space-x-2  h-8"><div class="text-foreground-on-primary flex shrink-0 items-center justify-center overflow-hidden uppercase transition rounded-full w-8 h-8 text-body-2xs bg-info-darker border-2 border-foundation"><div class="flex h-full w-full select-none items-center justify-center">AR</div></div></div><!----></div><!----></button></div></div><!----></div><div data-v-2a0edf91="" class="relative z-[11]"><div data-v-2a0edf91="" class="absolute pointer-events-auto" style="display: none; opacity: 1; transition: 100ms;"><div data-v-2a0edf91="" class="relative"><button data-v-2a0edf91="" class="transition bg-foundation shadow hover:shadow-xl flex -space-x-2 items-center p-[2px] rounded-tr-full rounded-tl-full rounded-br-full"><div data-v-2a0edf91="" class="flex -space-x-2"><div class="flex flex-wrap overflow-hidden -space-x-2  h-8"><div class="text-foreground-on-primary flex shrink-0 items-center justify-center overflow-hidden uppercase transition rounded-full w-8 h-8 text-body-2xs bg-info-darker border-2 border-foundation"><div class="flex h-full w-full select-none items-center justify-center">AR</div></div></div><!----></div><!----></button></div></div><!----></div><div data-v-2a0edf91="" class="relative z-[11]"><div data-v-2a0edf91="" class="absolute pointer-events-auto" style="display: none; opacity: 1; transition: 100ms;"><div data-v-2a0edf91="" class="relative"><button data-v-2a0edf91="" class="transition bg-foundation shadow hover:shadow-xl flex -space-x-2 items-center p-[2px] rounded-tr-full rounded-tl-full rounded-br-full"><div data-v-2a0edf91="" class="flex -space-x-2"><div class="flex flex-wrap overflow-hidden -space-x-2  h-8"><div class="text-foreground-on-primary flex shrink-0 items-center justify-center overflow-hidden uppercase transition rounded-full w-8 h-8 text-body-2xs bg-info-darker border-2 border-foundation"><div class="flex h-full w-full select-none items-center justify-center">AR</div></div></div><!----></div><!----></button></div></div><!----></div><div data-v-2a0edf91="" class="relative z-[11]"><div data-v-2a0edf91="" class="absolute pointer-events-auto" style="display: none; opacity: 1; transition: 100ms;"><div data-v-2a0edf91="" class="relative"><button data-v-2a0edf91="" class="transition bg-foundation shadow hover:shadow-xl flex -space-x-2 items-center p-[2px] rounded-tr-full rounded-tl-full rounded-br-full"><div data-v-2a0edf91="" class="flex -space-x-2"><div class="flex flex-wrap overflow-hidden -space-x-2  h-8"><div class="text-foreground-on-primary flex shrink-0 items-center justify-center overflow-hidden uppercase transition rounded-full w-8 h-8 text-body-2xs bg-info-darker border-2 border-foundation"><div class="flex h-full w-full select-none items-center justify-center">AR</div></div></div><!----></div><!----></button></div></div><!----></div><div data-v-2a0edf91="" class="relative z-[11]"><div data-v-2a0edf91="" class="absolute pointer-events-auto" style="display: none; opacity: 1; transition: 100ms;"><div data-v-2a0edf91="" class="relative"><button data-v-2a0edf91="" class="transition bg-foundation shadow hover:shadow-xl flex -space-x-2 items-center p-[2px] rounded-tr-full rounded-tl-full rounded-br-full"><div data-v-2a0edf91="" class="flex -space-x-2"><div class="flex flex-wrap overflow-hidden -space-x-2  h-8"><div class="text-foreground-on-primary flex shrink-0 items-center justify-center overflow-hidden uppercase transition rounded-full w-8 h-8 text-body-2xs bg-info-darker border-2 border-foundation"><div class="flex h-full w-full select-none items-center justify-center">AR</div></div></div><!----></div><!----></button></div></div><!----></div><div data-v-2a0edf91="" class="relative z-[11]"><div data-v-2a0edf91="" class="absolute pointer-events-auto" style="display: none; opacity: 1; transition: 100ms;"><div data-v-2a0edf91="" class="relative"><button data-v-2a0edf91="" class="transition bg-foundation shadow hover:shadow-xl flex -space-x-2 items-center p-[2px] rounded-tr-full rounded-tl-full rounded-br-full"><div data-v-2a0edf91="" class="flex -space-x-2"><div class="flex flex-wrap overflow-hidden -space-x-2  h-8"><div class="text-foreground-on-primary flex shrink-0 items-center justify-center overflow-hidden uppercase transition rounded-full w-8 h-8 text-body-2xs bg-info-darker border-2 border-foundation"><div class="flex h-full w-full select-none items-center justify-center">AR</div></div></div><!----></div><!----></button></div></div><!----></div><!----><!----><!----><!----></div></div>

I’m not expert either, but if you can add custom CSS there seem to be ways to scale the iframe content:

@fabians @Andrew_Wallace @MikeTasset might have some quick ideas too!

1 Like

Hi @alex-d-richards,

It’s a bit difficult to say why things are rendering the way they are when they are being embedded in a 3rd party tool, I think as @teocomi suggested using some custom CSS would be your best option.

You could use zoom or transform.

Keep in mind that if you use these you need to offset this by increasing the width/height of the iframe. So if you set the zoom to 0.5 and the original width was 600px, you need to set the width to 1200px.

Alternatively you could use zoom in combination with scale-to-fit="true" and width: 100%; height: 100%, but iirc the browser support is a bit more limited, in that way you can control the rendered width/height from the parent and the iframe will adapt.

2 Likes

Thanks for the speedy response, will give it a go a feedback how it goes.

1 Like