Support for unscaled iframes

[tschaub]

Is your feature request related to a problem? Please describe.
The built-in iframe layout accepts a scale prop. I assumed that I could set this to 1 to embed an iframe without scaling. However, resizing the page shows that the iframe content is still scaled.

Describe the solution you'd like
I'd like to be able to embed an iframe without scaling.

Describe alternatives you've considered
I've created a custom iframe-unscaled.vue layout to reverse the scaling that is applied to slide content:

<script setup lang="ts">
const props = defineProps<{
  url: string
}>();

const unscaledSize = 'calc(100% * var(--slidev-slide-scale))';
const unscaledTransform = 'scale(calc(1 / var(--slidev-slide-scale)))';
</script>

<template>
  <div class="h-full w-full">
    <div relative :style="{ width: unscaledSize, height: unscaledSize }">
      <iframe
        id="frame" class="w-full h-full"
        :src="url"
        :style="{ transform: unscaledTransform, transformOrigin: 'top left' }"
      />
    </div>
  </div>
</template>

I'm uncertain if making use of the --slidev-slide-scale CSS variable should be avoided. Ideally, I could pass a prop to the existing iframe layout to avoid scaling.

Here is an example that demonstrates the scaling of the current iframe layout: https://stackblitz.com/edit/slidev-iframe-unscaled?file=slides.md,layouts%2Fiframe-unscaled.vue (the preview needs to be opened in a dedicated tab for the iframes to load).