LightGallery album embedded in iframe

This is an example of an embedded album made with the jAlbum LightGallery skin. It is a LightGallery album where the index page is embedded in a web page.

It uses the next css code in the head section:

<style>
.iframe-container { position: relative; height: 0; -webkit-overflow-scrolling: touch; overflow-x: hidden; overflow-y: auto; padding-bottom: 66.67%; /* 100*(h/w) 6:9 ratio */ }
.iframe-container iframe { position:absolute; top:0; left:0; width:100%; height:100%; border:none; }
</style>

The album is displayed in a responsive iframe with this code in the body section:

<div class="iframe-container">
<iframe src="https://AndreWolff.jalbum.net/Nepal_Embedded_Album_LG/" allowfullscreen> </iframe>
</div>

You can generate this code with jAlbum menu item Album / Embed album. The system will propose a default Album height/width ratio of 6:9, so which corresponds with padding-bottom: 66.67%;
Use other padding-bottom values for other ratios: use for 1080:1920 padding-bottom: 56.25%.

If you make an embedded gallery (slide page) by setting check-mark "Skip thumbnails pages", you can replace in the css code " -webkit-overflow-scrolling: touch; overflow-x: hidden; overflow-y: auto;" by "overflow: hidden;", because the slide page requires no scroll-bars.
See here the embedded slide page of this album.

More info about the used CSS code on the blog of Ben Marshall