How do I make my iframe responsive for all devices?

Question

I am not an expert in HTML, CSS, or JavaScript, but I have this website that needs to be responsive on all devices. However, it does not seem like it is working for some reason and instead creates major gaps of white space when I view the website on a mobile web browser:

Here is the code for it:

 <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,height=device-height,initial-scale=1"> <title>untitled document</title> <style media="screen"> body { background-color: #f0f0f0; font: 1em verdana, arial, helvetica, sans-serif; line-height: 0px; } h1,h2 { font-size: 2em; color: #f00; text-align: center; text-shadow: 0 0 0.06em #000,0 0 0.12em #000; } .af-textWrap { display: block; text-align: center; color: #b7b7b7; } .af-element { text-align: center; } #awf_field-90534028, #awf_field-90534029 { display: block; width: 98%; max-width: 28.125em; margin: auto; text-align: left; } .image { display: block; width: 98%; max-width: 30em; height: auto; margin: auto; } </style> </head> <body> <div id="worked"></div> <script src="https://fast.wistia.com/embed/medias/cj7247tp29.jsonp" async></script><script src="https://fast.wistia.com/assets/external/E-v1.js" async></script><div class="wistia_responsive_padding" style="padding:56.25% 0 0 0;position:relative;"><div class="wistia_responsive_wrapper" style="height:100%;left:0;position:absolute;top:0;width:100%;"><div class="wistia_embed wistia_async_cj7247tp29 videoFoam=true" style="height:100%;width:100%">&nbsp;</div></div></div> <h1>Offer Ends In:</h1> <h2 id="time"></h2> <!-- AWeber Web Form Generator 3.0.1 --> <form class="af-form-wrapper" accept-charset="UTF-8" action="https://www.aweber.com/scripts/addlead.pl" method="post"> <input name="meta_web_form_id" type="hidden" value="604218668"> <input name="meta_split_id" type="hidden" value=""> <input name="listname" type="hidden" value="awlist4661276"> <input id="redirect_56ab2ff33416d920a3c24dc4d8e140f4" name="redirect" type="hidden" value="http://bloggingnetworkonline.com/InternetMarketing/?page_id=133&amp;preview=true"> <input name="meta_adtracking" type="hidden" value="My_Web_Form"> <input name="meta_message" type="hidden" value="1"> <input name="meta_required" type="hidden" value="name,email"> <input name="meta_tooltip" type="hidden" value="name||First Name...,,email||Best Email..."> <div id="af-form-604218668" class="af-form"> <div id="af-body-604218668" class="af-body af-standards"> <div class="af-element"> <label class="previewLabel" for="awf_field-90534028"></label> <div class="af-textWrap"> <input id="awf_field-90534028" class="text" tabindex="500" name="name" type="text" placeholder="First Name..."> </div> </div> <div class="af-element"> <label class="previewLabel" for="awf_field-90534029"></label> <div class="af-textWrap"> <input id="awf_field-90534029" class="text" tabindex="500" name="email" type="text" placeholder="Best Email..."> </div> </div> <div class="af-element buttonContainer"> <input id="af-submit-image-604218668" class="image" tabindex="502" alt="Submit Form" name="submit" src="https://hostedimages-cdn.aweber-static.com/MTE0ODQyNQ==/original/d316599087b84f9498e3854009bdad52.png" type="image"/> </div> <div class="af-element privacyPolicy"> <p><strong>I respect your <a title="Privacy Policy" href="https://www.aweber.com/permission.htm" target="_blank" rel="nofollow">email privacy</a></strong></p> <div class="af-clear">&nbsp;</div> </div> </div> </div> <div style="display: none;"><img src="https://forms.aweber.com/form/displays.htm?id=bAwsTIwcbGwc" alt=""> </div> </form> <!-- /AWeber Web Form Generator 3.0.1 --> <script> (function() { 'use strict'; var handler = function() { if (--sec < 0) { sec = 59; if (--min < 0) { min = 0; sec = 0; } } var min1 = '0' + min + 'm'; var min2 = min + 'm'; var sec1 = '0' + sec + 's'; var sec2 = sec + 's'; var col = ':'; document.getElementById('time').textContent = (min < 10 ? min1 : min2) + col + (sec < 10 ? sec1 : sec2); }; var sec = 0; var min = 15; handler(); setInterval(handler, 1000); }()); </script> </body> </html>

Answer 1

Looks like your iframe is injected by JavaScript so I personally suggest adding a setInterval() to your code to monitor the iframe element. Once the iframe element is available, get the body in the iframe and set it's margin to 0 .

 $(function() { $('#test').append('<iframe src="http://www.w3schools.com"></iframe>'); var timer = setInterval(function() { $('iframe').load( function() { $('iframe').contents().find("head").append($("<style type='text/css'>body{margin:0;}</style>")); clearInterval( timer ); // Clear the interval }); }, 10); });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="test"> </div>

How do I make my iframe responsive for all devices?

Question

1 answers

solution1
0 2017-05-12 00:14:49

How do I make my iframe responsive for all devices?

Question

1 answers

solution1 0 2017-05-12 00:14:49

solution1
0 2017-05-12 00:14:49