How to resize the content of an iframe card?

Configuration Frontend
1

I am loading the following page into an iframe card:

ÖBB -  

Is it possible to resize the content within the iframe? If yes, how?

2

2 Likes
3

Thats brilliant, thank you.

4

Hey I know this is an old post, but you seem to be the only one that has posted anything like this, but even copying your code directly over it doesn’t seem to work. Do you know if something has changed in HA that would make this no longer work?

5

still works

6

I can’t get the indentation right from the example in the top.
can someone help me out pls.

could it be something like:

style: |
#root iframe {
transform: scale(60%)
}
url: …

My goal is to scale Music Assistant in an iFrame, so that i can see more than the usual albums in one row.

7

Hey there

Im also trying to get this to work?

Ive downloaded Card-Mods from HACS, Get this message?

Screenshot 2023-11-17 at 11.37.38
Screenshot 2023-11-17 at 11.37.382452×1420 317 KB

8

This seemed to work…adding scale(1.5); or what ever number suits…

card_mod:
style: |
div#root iframe {
transform: scale(1.5);
transform-origin: 0 0;
width: 100000px;
height: 100000px;
}

9

I’m getting the Entity not available input_number error. Anyone ever solve this?

10

The provided card-mod code requires an input_number entity to be created.

11

Thank you. I did a bit of research and found how to do this. It’s working now. Thanks for your help.

12

Hello,
I tried to built the card as explained here but the scale value doesn’t take any effect. Am I doing something wrong? Or is it a problem with the embedded website? Here is my Yaml code:

type: vertical-stack
cards:
  - type: entity
    entity: input_number.scale_card_mod
    name: Scale
  - type: iframe
    url: >-
      https://dfisite.vvs.de/?default_stop=de%3A08118%3A7400&time_offset=3&zoom_factor=1&rows=7&show_messages=1&show_position=0&lpm=400&lang=de&pk_campaign=entwicklertools&pk_kwd=abfahrtstafel
      aspect_ratio: 100% card_mod:
        style: |
          div#root iframe {
            transform: scale (input_number.scale_card_mod)
            transform-origin: 0 0;
            width: 100000px;
            height: 100000px;
          }
13

This is a wrong code.
Compare with my example.

Here lines seem to be wrongly placed.

14

Sorry, I tried too many times testing various things. I corrected the code to:

type: vertical-stack
cards:
  - type: entity
    entity: input_number.scale_card_mod
    name: Scale
  - type: iframe
    url: https://dfisite.vvs.de/?default_stop=de%3A08118%3A7400&time_offset=3&zoom_factor=1&rows=7&show_messages=1&show_position=0&lpm=400&lang=de&pk_campaign=entwicklertools&pk_kwd=abfahrtstafel
    aspect_ratio: 100%
    card_mod:
      style: |
        div#root iframe {
          transform: scale ({{states("input_number.scale_card_mod")
          transform-origin: 0 0;
          width: 100000px;
          height: 100000px;
        }

But it took no effect.

15

I have now found a solution for myself without card-mod. I tried to use the ‘zoom-factor’ value in the url before. But it took no effect because I Used “0,5” instead of “0.5”. Sorry. No coding skills and german :flushed:

16

Please do not apologise.
This is mainly about “attentiveness”, not about “coding skills”.
Compare your code & mine (this tool was used):

image
image1460×335 28.3 KB

  1. The 1st card which I used is Entities card which allows you to have a “slider” to change a “scale” & immediately see a result. But in your code it is Entity card.
  2. The more important part - an error in a template.
    When a static value is used for the “scale”, it is defined as:
card_mod:
  style: |
    ha-card {
      transform: scale(1.5);
      transform-origin: 0 0;
      ...
    }

Here a fixed “1.5” value is used.
Note a “semicolon” after the command - you do NOT have it in your code. This means that ALL commands might not work here:

card_mod:
  style: |
    ha-card {
      transform: scale(1.5)
      ... could be anything here & it will not work
    }

Next, we need a dynamic value instead of that “1.5”.
The value can be accessed with “states('input_number.scale_card_mod')”:

card_mod:
  style: |
    ha-card {
      transform: scale({{states('input_number.scale_card_mod')}});
      transform-origin: 0 0;
      ...
    }

Note “{{ }}” because this is a TEMPLATE.
But this code will give us

card_mod:
  style: |
    ha-card {
      transform: scale('1.5');
      transform-origin: 0 0;
      ...
    }

because states are STRINGS. And the “scale()” needs a NUMBER.
That is why we need to convert it to a number:

card_mod:
  style: |
    ha-card {
      transform: scale({{states('input_number.scale_card_mod') | float}});
      transform-origin: 0 0;
      ...
    }

Or even “states('input_number.scale_card_mod') | float / 100” like in my example to “tune up” a scale.

Hope this will help you.