Register now to learn Fabric in free live sessions led by the best Microsoft experts. From Apr 16 to May 9, in English and Spanish.
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.
Solved! Go to 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:
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
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:
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
Covering the world! 9:00-10:30 AM Sydney, 4:00-5:30 PM CET (Paris/Berlin), 7:00-8:30 PM Mexico City
Check out the April 2024 Power BI update to learn about new features.