How to create an iFrame responsive!

iframe

iframe

An iFrame can also be designed responsive!

An iFrame can be integrated into a website using the tutorial presented here. The width (width) and the height (height) of the iFrame content are automatically adjusted to the respective terminal resolution.

In particular, dynamic contents (e.g., responsive forms, guest books, etc.) can thus be displayed easily and without scrollbars by smartphones and tablets.

y

Tutorial – Step by Step to the Responsive iFrame!

1. Insert this javascript code between <head> and </ head>:

<script type=”text/javascript”>
function iframeLoaded() {
var iFrameID = document.getElementById(‘idIframe’);
if(iFrameID) {

iFrameID.height = “”;
iFrameID.height = iFrameID.contentWindow.document.body.scrollHeight + “px”;
}
}
</script>

Important: The javascript code for the iFrame only works if the corresponding page is on the same domain. If you want to include a page from a foreign domain, the (following) div element must have the class “embed-container” (see below) [Example YouTube Video]).

2. Paste this iFrame code into a div element (<div> </ div>):

<Div>

<Iframe src = “http://www.yourdomain.com/text.html” id = “idIframe” width = “100%” onload = “iframeLoaded ()” style = “border: none;” Allowfullscreen> </ iframe>

</ Div>

Description: The iFrame must be embedded in a div element. To make the iFrame responsive, it must have these parameters:

Id = “idIframe”
Onload = “iframeLoaded ()”
Allowfullscreen

3. Done!

Special feature: YouTube videos

A special feature is when YouTube video is included, since YouTube prevents the JavaScript code from running. The height and width are thus no longer automatically adjusted. To solve this problem, the div element must have the class “embed-container”:

<div class=”embed-container”>
<iframe src=”http://www.youtube.com/link” id=”idIframe” width=”100%” onload=”iframeLoaded()” style=”border: none;” allowfullscreen> </iframe>
</div>

 

The corresponding stylesheet looks like this:

<style type=”text/css”>

.embed-container {
position: relative;
padding-bottom: 56.25%; /* ratio 16×9 */
height: 0;
overflow: hidden;
width: 100%;
height: auto;
}

.embed-container iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

/* ratio 4×3 */
.embed-container.ratio4x3 {
padding-bottom: 75%;
}

</style>

 

The class “.embed-container” ensures by “padding-bottom: 56.25%;” To display a 16×9 video. If you want to display a video in the format 4×3, you must set the value in “padding-bottom: 75%;” to change.

 

if this post is helpful for u, then don’t forgot to drop your comment 🙂

 

Please follow and like us:
0