add height, width attributes

[RobertGetzner]

Hi, this is my first pull request, sorry if I didn´t follow all rules. I added height and width parameters to change the overall size of card independently from the inner iframe.

Maybe there´s a more elegant way to achieve the same in HA, but I didn´t know better. Thanks and best regards, Robert

[PiotrMachowski]

Hi, could you describe potential uses of this feature?

[RobertGetzner]

Hi Piotr, I embed an iframe from meteoblue.ch. Control on the layout of the embedded page is limited. Therefore I want to "crop" the embedded Iframe. Full code below including some responsiveness for tablet and phone. Meanwhile I also added the "cropping" behaviour, in css it´s called 'overflow'. My knowledge of css and home assistant technology is limited, so maybe there are more elegant ways to achieve the same. Thanks for your work! Robert

  - title: W2
    path: w2
    type: custom:grid-layout
    layout:
      grid-template-columns: auto 30px 25%
      grid-template-rows: auto
      grid-template-areas: |
        "header header header"
        "main . sidebar"
        "footer footer footer"
      mediaquery:
        '(max-width: 600px)':
          grid-template-columns: 100%
          grid-template-areas: |
            "header"
            "sidebar"
            "main"
            "footer"
        '(max-width: 800px)':
          grid-template-columns: 50% 50%
          grid-template-areas: |
            "header sidebar"
            "main main"
            "footer footer"
    badges: []
    cards:
      - type: custom:html-card
        height: 375px
        width: 610px
        overflow: hidden
        content: >
          <iframe 
          src="https://www.meteoblue.com/en/weather/widget/three/n%c3%bcziders_austria_2770391?geoloc=fixed&nocurrent=0&nocurrent=1&noforecast=0&days=7&tempunit=CELSIUS&windunit=KILOMETER_PER_HOUR&layout=bright" 
          frameborder="0" scrolling="NO" allowtransparency="true"
          sandbox="allow-same-origin allow-scripts allow-popups
          allow-popups-to-escape-sandbox" style="width: 805px; height: 510px ;
          ;-moz-transform: scale(0.75, 0.75);  -webkit-transform: scale(0.75,
          0.75);  -o-transform: scale(0.75, 0.75); -ms-transform: scale(0.75,
          0.75); transform: scale(0.75, 0.75);  -moz-transform-origin: top left;
          -webkit-transform-origin: top left; -o-transform-origin: top left;
          -ms-transform-origin: top left; transform-origin: top left;"></iframe>
        view_layout:
          grid-area: main
          show:
            mediaquery: '(min-width: 600px)'
      - type: custom:html-card
        height: 230px
        width: 350px
        overflow: hidden
        scale: 10
        content: >
          <iframe 
          src="https://www.meteoblue.com/en/weather/widget/three/n%c3%bcziders_austria_2770391?geoloc=fixed&nocurrent=0&nocurrent=1&noforecast=0&days=5&tempunit=CELSIUS&windunit=KILOMETER_PER_HOUR&layout=bright" 
          frameborder="0" scrolling="NO" allowtransparency="true"
          sandbox="allow-same-origin allow-scripts allow-popups
          allow-popups-to-escape-sandbox" style="width: 805px; height: 510px ;
          ;-moz-transform: scale(0.45, 0.45);  -webkit-transform: scale(0.45,
          0.45);  -o-transform: scale(0.45, 0.45); -ms-transform: scale(0.45,
          0.45); transform: scale(0.45, 0.45);  -moz-transform-origin: top left;
          -webkit-transform-origin: top left; -o-transform-origin: top left;
          -ms-transform-origin: top left; transform-origin: top left;"></iframe>
        view_layout:
          grid-area: main
          show:
            mediaquery: '(max-width: 600px)