Support » Theme: Twenty Twenty » embed container – iframe on Theme: display infos on the page

  • good day dear community,

    i wanna add the Visual Dashboard (desktop) of the Covid 19 info of John Hopkins University with iframe

    see: the info https://www.arcgis.com/apps/opsdashboard/index.html#/bda7594740fd40299423467b48e9ecf6

    and here:

    COVID-19 Data Repository by the Center for Systems Science and Engineering (CSSE) at Johns Hopkins University: https://github.com/CSSEGISandData/COVID-19
    the Repository on Github.

    Embed our dashboard into the webpage: – see the infos on the page:
    https://github.com/CSSEGISandData/COVID-19
    the Repository on Github.

    
    <style>.embed-container {position: relative; padding-bottom: 80%; height: 0; max-width: 100%;} .embed-container iframe, .embed-container object, .embed-container iframe{position: absolute; top: 0; left: 0; width: 100%; height: 100%;} small{position: absolute; z-index: 40; bottom: 0; margin-bottom: -15px;}</style><div class="embed-container"><iframe width="500" height="400" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" title="COVID-19" src="https://www.arcgis.com/apps/opsdashboard/index.html#/bda7594740fd40299423467b48e9ecf6"></iframe></div>
    

    see here: https://github.com/CSSEGISandData/COVID-19
    the Repository on Github.

    question: can i add this iframe-code on the theme twenty-twenty – without any issues – is this doable!? Love to hear from you

Viewing 1 replies (of 1 total)
  • Thread Starter say_hello

    (@say_hello)

    hello dear Community,

    i did it: it works very well: see https://www.f-s-j.de/

    note, this is a very fresh installed WP with the theme twenty-twenty.

    see the embedded block:
    what i want to achieve: lower the height and the width

    i allready have played with the values of the code:

    a. width: 100%; height: 100%; – i changed those values to 50 % – without any effect: this changed nothing.
    b. iframe width=”500″ height=”400 – i changed those values to other values – without any effect:

    how to achive a smaller embedded block !? look forward to hear from you+

    regards
    say

    see the embedded code:

    <style>.embed-container {position: relative; padding-bottom: 80%; height: 0; max-width: 100%;} .embed-container iframe, .embed-container object, .embed-container iframe{position: absolute; top: 0; left: 0; width: 100%; height: 100%;} small{position: absolute; z-index: 40; bottom: 0; margin-bottom: -15px;}</style><div class="embed-container"><iframe width="500" height="400" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" title="COVID-19" src="https://www.arcgis.com/apps/opsdashboard/index.html#/bda7594740fd40299423467b48e9ecf6"></iframe></div>

    see where i have gathered the code to embed: COVID-19 Data Repository by the Center for Systems Science and Engineering (CSSE) at Johns Hopkins University: https://github.com/CSSEGISandData/COVID-19

    btw: the theme that i run is a standard-theme twenty-twenty – with a coblock that is running …

    look forward to hear from you

    regards

    • This reply was modified 3 months, 3 weeks ago by say_hello. Reason: more infos
Viewing 1 replies (of 1 total)
  • You must be logged in to reply to this topic.