Dynamic iFrame card source based on HTTP(S) protocol

1

Hi there!

Is it possible to change the source of an iFrame card dynamically? And more specifically, is it possible to do so based on whether Home Assistant is visited through HTTP or HTTPS?

Context: I run a Jellyfin mediaserver next to Home Assistant. This media server is available both locally (HTTP) and via the internet (HTTPS). I manage this all using the awesome Nginx Proxy Manager add-on.

I integrate the Jellyfin interface in my HA instance using an iFrame card, and use the external Jellyfin URL as iFrame source (which works for both local and external HA access). The drawback of this approach is that internet is required to properly render the iFrame. So what I’d like to do is the following:

  • When I access HA locally → use the internal IP of my media server as the iFrame’s source.
  • When I access HA over the internet → use the domain name that points to my media server.

Is this possible? Any help is appreciated, thanks for reading!

1 Like
2

Did you have any luck getting this to work?

3

Maybe you can achieve this with GitHub - lovelylain/hass_ingress: Home Assistant ingress feature, add additional ingress panels to your Home Assistant frontend..
ingress configuration in configuration.yaml:

ingress:
  ingress:
    work_mode: iframe
    ui_mode: replace
    title: Navigation
    icon: mdi:cursor-default-click
    url: /lovelace/navigation
  jellyfin:
    parent: ingress
    work_mode: iframe
    title: Jellyfin
    icon: mdi:folder-multiple
    url:
      match: http://.+
      replace: http://192.168.1.1:8080
      default: https://media.example.com

webpage configuration in lovelace:

type: iframe
url: /ingress/jellyfin?replace

@ThijmenDam @PlayedIn