Load different </iframe> depending on user's screen width

Question

Thank you for taking the time to read this, and help the Internets out with your response(s) in the process.

I have a responsive website that runs on WordPress 4.0.1.

After creating a Page and posting content to it, I noticed one of the iframes I posted is not responsive and does not look good on mobile devices with small screens (iPhone 4/4S/5/5S). Even though I used the vendor's solution via CSS to make the iframe responsive, it still does not render as nice in mobile devices with small screens.

So I went ahead and created different iframes for each mobile device screen.

Now I would like the ability to put some code on my page that will detect the user's screen horizontal resolution and load the iframe that would best fit that resolution.

For example,

IF User Screen is less than 305 THEN

IFRAME for iPhone 5S

ELSE IF IF User Screen is less than 355 THEN

IFRAME for iPhone 6

ELSE

IFRAME THAT SUPPORTS ALL OTHER WIDTHS

What would be the best way to accomplish this using WordPress?

I tried re-using the code in the two resolutions below with my own iframes, and they did not work:

http://www.codingforums.com/javascript-programming/198521-help-if-else-statement-loading-iframe-based-resolution.html

Load Iframe based on screen width

Your help would be greatly appreciated!

Answer 1

THANK YOU all for taking the time to post your answers, unfortunately, they did not work for me, and it may be due to my lack of understanding Web/CSS programming.

After spending a few hours doing some more research, the code below worked for me:

<script type='text/javascript'>

var iPhone5S ='<iframe src="https://www.YOUR_IFRAME_URL_GOES_HERE.COM" width="305" height="860"></iframe>';
var iPhone6 = '<iframe src="https://www.YOUR_IFRAME_URL_GOES_HERE.COM" width="354" height="860"></iframe>';
var Web = '<iframe src="https://www.YOUR_IFRAME_URL_GOES_HERE.COM" width="940" height="970"></iframe>';

if (document.width < 321)
{document.write (iPhone5S)}
else if (document.width < 376)
{document.write (iPhone6)}
else
{document.write (Web)}

</script> 

The code works like this:

var declares the name/device type and its corresponding iframe, then the IF statement, based on the document width returns the iframe you declared to match the user screen width.

Hope this helps the internets as much as it helped me!

Answer 2

I advice you to use fitvids.js it's the better solution , it take care of all your iframes what ever the screen resolution here is an example i made it for you :

A lightweight, easy-to-use jQuery plugin for fluid width video embeds.

OFFICIAL WEB PAGE

LIVE DEMO

<div class="container">
        <iframe width="560" height="315" src="http://www.youtube.com/embed/SZEflIVnhH8" frameborder="0" allowfullscreen></iframe>
    </div>

    <div class="container-2">
        <iframe src="http://player.vimeo.com/video/23534361" width="500" height="281" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe> <p><a href="http://vimeo.com/23534361">The Animated Envato Community Podcast</a> from <a href="http://vimeo.com/activetuts">Activetuts+</a> on <a href="https://vimeo.com">Vimeo</a>.</p>
    </div>

    <div class="container">
        <iframe src="http://demo-video-site.com" frameborder="0" allowfullscreen id="custom"></iframe>
    </div>

don't forget to add Jquery and FitVids.js

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.map"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fitvids/1.1.0/jquery.fitvids.min.js"></script>

With this Jquery plugin you don't have to set different media queries for each resolution the plugin do all the job for you !

EDIT :

to load a different iframe depend on the screen size, here is a jQuery solution :

<script type="text/javascript">

$(document).ready(function()
{
if($(window).width() < 1500)
  $('#IFRAMEID').attr("src","Your URL");
else
  $('#IFRAMEID').attr("src","Your URL");
});

</script>

you may be need to add id's to your iframes like follow :

<iframe id="IFRAMEID" src="public.tableausoftware.com/views/Resume-Dashboard-iPhone5S-P/…; width="305" height="870"></iframe> 

<iframe id="IFRAMEID" src="public.tableausoftware.com/views/Resume-Dashboard-Web-Automatic/…; width="940" height="970"></iframe>

Answer 3

If you're looking for a simple non-javascript solution, you can do this with CSS Media Queries at the end of your CSS file. (Perhaps easier if you're using WP).

eg: ( from https://css-tricks.com/snippets/css/media-queries-for-standard-devices/ )

   /* Smartphones (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
/* Styles */
}

/* Smartphones (landscape) ----------- */
@media only screen 
and (min-width : 321px) {
/* Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen 
and (max-width : 320px) {
/* Styles */
}

/* iPads (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
/* Styles */
}

/* iPads (landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
/* Styles */
}

/* iPads (portrait) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {
/* Styles */
}

/* Desktops and laptops ----------- */
@media only screen 
and (min-width : 1224px) {
/* Styles */
}

/* Large screens ----------- */
@media only screen 
and (min-width : 1824px) {
/* Styles */
}

/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}

Set the default "display" styles of your iFrames to none. Then use the styles in the above media queries to set display:block; for the iframe you want to show.