The pro version has a button where all needed settings for a fullscreen iframe are set automatically.
Fullscreen iframe
If you click here a page with a fullscreen iframe is opened.
Button on iframe that make the iframe fullscreen
The example below shows a new feature of advanced iframe pro 2022.3.
This shows a fullscreen button on the iframe like a youtube videos. If you click on the icon the iframes goes fullscreen and a close fullscreen button is shown. When you click on it the iframe switches back. You can configure the button to be on top or bottom on the right side.
The feature has 6 locations for the button:
- top – shows the icon in the top right corner
- top_scroll – shows the icon in the top right corner minus the scrollbar
- bottom – shows the icon in the bottom right corner
- bottom_scroll – shows the icon in the bottom right corner minus the scrollbar
- top_left – shows the icon in the top left corner
- bottom_left – shows the icon in the bottom left corner
_scroll should be used if the page has a scrollbar. Below bottom and bottom_scroll are used to show the difference. You can use this feature on multiple iframes on a page. Also all iframe are loaded. This feature does not load the iframe again when you click. Simply css styles are changes dynamically.
The following shortcode is used:
[advanced_iframe src="//www.tinywebgallery.com/blog/advanced-iframe" width="100%" height="200" fullscreen_button="bottom"]
The following shortcode is used:
[advanced_iframe src="//www.tinywebgallery.com/blog/advanced-iframe" width="100%" height="200" fullscreen_button="bottom_scroll"]
Real Fullscreen
If you like the full screen without any browser elements please see here:
Sometimes some elements are still visible because they are on a higher z-index. You can hide this elements with “Hide additional elements at full screen”
Best, Michael