Fullscreen button. iFrame responsive for mobiles?

[Histos]

Hello,

I have 2 issues in my embedded Power BI report in my wordpress website:
(Both things I comment you can find it in the report I've done here: https://historich.net/pandemias-en-la-historia/ )

1# iframe is not responsive. (here I share my solution)

I guess this is not a Power BI issue, but is interesting for anyone who use Power BI embedded, the thing is that the height of the iframe is not responsive, and if you want a balanced width/high in desktop version, it won't look good in mobile.
So what I did is make it responsive with an embed-container and easy (copy/paste) css. Here I share u my HTML code:

<div class="embed-container">
<iframe src="your own URL" frameborder="0" allowfullscreen="" webkitallowfullscreen="true" mozallowfullscreen="true" oallowfullscreen="true" msallowfullscreen="true"></iframe>
</div>

And here is the CSS:

.embed-container {
position: relative;
padding-bottom: 70.75%;
height: 0;
overflow: hidden;
}
.embed-container iframe {
position: absolute;
top:0;
left: 0;
width: 100%;
height: 100%;
}

2# Fullscreen Button in mobile version

Here my problem is that the button where we can see the report in fullscreen, it desappears when you open the web in the mobile (but it appears if you view it in desktop version in the mobile).
Thats an important thing cause the reports can only be enjoyed in fullscreen mode specially in cellphones (until is available the mobile view).
My little solution (but I think is not perfect) is to ad a link under the iframe that brings you to the report, and then you can see the fullscreen button. But its bit confusing.

Both issues I told, you can find it here and see how it looks in a report about all the pandemics and epidemics through the history.

https://historich.net/pandemias-en-la-historia/

Any other comment will help, thank you.

[v-luwang-msft · Accepted solution]

Hi @Histos ,

In order to make your embedded iframe responsive, you need to wrap the iframe in a div and apply inline css. Follow these simple steps:

1. Get the iframe embed code and paste in into your HTML page.
2. Set the height and the width attributes of the iframe tag to 100%
3. Change the CSS position of the iframe tag to 'absolute' and set the left and top CSS parameters to '0'
4. Add a div container around the iframe tag as it is shown by the following sample code. The value of the 'padding-bottom' parameter is based on the aspect ratio of the content (in case of a 16:9 video the calculation is 9/16 = 0.5625)

Your final html code should look similar to the below:

 <div id="Container"
     style="padding-bottom:56.25%; position:relative; display:block; width: 100%">
     <iframe id="ViostreamIframe" width="100%" height="100%" src="https://publish.viostream.com/player/iframe/s0m3m3d14?playerKey=s0m3p14y3r" frameborder="0" allowfullscreen="" style="position:absolute; top:0; left: 0"></iframe>
</div>

refer： https://help.viostream.com/frequently-asked-questions/how-do-i-make-an-iframe-embed-responsive 

And about  Fullscreen Button in mobile version,refer:

https://developers.google.com/web/fundamentals/native-hardware/fullscreen 

Best Regards

Lucien