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 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>