Can I stop all interactions within an iframe, making it "view only"?

Configuration Frontend
1

Hi there. I was trying to embed a windy widget on my dashboard. I can embed without any issues in a iframe, but I’d like to have my weather map shown as “view only”, preventing any interaction with it, such as:

  • clicking/tapping on a button inside it;
  • dragging the map.

I tried with CSS, card-mod and ChatGPT. He suggested me to use this code with the “pointer events” attribute, but it doesn’t appear to work (the map is shown correctly but I can still interact with it):

type: custom:mod-card
card:
  type: iframe
  url: "https://embed.windy.com/embed.html?type=map&location=coordinates&metricRain=mm&metricTemp=°C&metricWind=km/h&zoom=8&overlay=solarpower&product=icon&level=surface&lat=30.173&lon=28.267&detailLat=40.096&detailLon=18.342&marker=true&pressure=true"
  aspect_ratio: 100%
style: |
  ha-card {
    position: relative;
  }
  iframe {
    pointer-events: none;
  }
  .overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0);
    pointer-events: auto;
  }

Is there a way to stop such interactions? My HA dashboard will be used a lot by my parents, but I already know they would get lost pretty easy if they start scrolling inside the iframe… Thanks in advance!

2

Try

type: iframe
url: ...
card_mod:
  style: |
    iframe {
      pointer-events: none;
    }
...
3

Hi, you can see this string is already in my code provided by ChatGPT. It does not work, at least on my install. Would this work by you?

4

Hard to believe - but some people still using own brains for searching & learning instead of chatgpt. Why not trying by yourself to check the proposed code?

Note: mod-card not needed for iframe card.

In future - ask all card-mod related questions in the main card-mod thread.
There are lot of working examples in that thread - working, not invented by chatgpt.

5

If you don’t find any solution, you could reset the dashboard after some time so when they ‘get lost’ the system goes back to a start point.

1 Like
6

You can just make the whole card un-click-able since all it contains is the iframe:

style: |
  ha-card {
    pointer-events: none;
  }
1 Like
7

Tbh I felt this as a kinda rude and pointless comment. I’ve already looked for this topic on the forums. I’ve already learned about CSS using the cheat sheet provided here on the forums. I’m just a month old in coding and I think there’s nothing wrong with having ChatGPT helping me.

There’s no point in using iframe alone as it’s not what I’m trying to achieve. There’s no need to ask for help in the card-mod thread since it’s not an issue related with it.

Please next time refrain from being so hard on inexperienced people asking for help.

8

This did it! Adding the pointer-events to the iframe wasn’t working, but applying to all the card did the trick! Thanks a lot!

9

This is actually a nice workaround I might use in some other projects of mine, thanks!

10

Seems that you got my point in a wrong way. Nobody wished to insult you - yet you managed to get offended.
So, between being grateful for a ready solution & being insulted - you chose the 2nd, good luck).

Yet you chose as a solution a “card-mod” variant ))).
Which is - with my all due respect to the person who proposed it - will not work “as is”.

Because you did it in a wrong way.