Forum Discussion
Fullscreen button. iFrame responsive for mobiles?
- 4 years ago
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:
- Get the iframe embed code and paste in into your HTML page.
- Set the height and the width attributes of the iframe tag to 100%
- Change the CSS position of the iframe tag to 'absolute' and set the left and top CSS parameters to '0'
- 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
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:
- Get the iframe embed code and paste in into your HTML page.
- Set the height and the width attributes of the iframe tag to 100%
- Change the CSS position of the iframe tag to 'absolute' and set the left and top CSS parameters to '0'
- 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