I know a lot may use css to do this but I am looking if there is a way using javascript on a webpage that will serve a different iframe [such as a you video with a different size] depending on detected screen resolution width. Also need away to do the same with serving different size images depending on screen width. Tried this on a test page but all it gave me was a white screen... <script type = "text/javascript"> var sw = screen.width; if (sw <341) { document.write('<iframe width="290" height="218" src="https://www.youtube.com/embed/V9TOtDjk7Qs?rel=0" frameborder="0" allowfullscreen></iframe>'); } else if (sw <481) { document.write('<iframe width="400" height="300" src="https://www.youtube.com/embed/V9TOtDjk7Qs?rel=0" frameborder="0" allowfullscreen></iframe>'); else if (sw <641) { document.write('<iframe width="600" height="450" src="https://www.youtube.com/embed/V9TOtDjk7Qs?rel=0" frameborder="0" allowfullscreen></iframe>'); else { document.write('<iframe width="740" height="555" src="https://www.youtube.com/embed/V9TOtDjk7Qs?rel=0" frameborder="0" allowfullscreen></iframe>'); } </script>
depending on WHERE you call that script, it could overwrite the existing document. Generally speaking this is why document.write should be avoided -- well that and even when it does work it forces a "reparse" of the document that can make the page take longer to load. Since all you have there are breakpoints, and all those iframe are loading the same content -- these days if you want to make a responsive layout that's NOT JavaScript's job! There are TWO ways of doing this, the first is using media queries: HTML: <iframe src="https://www.youtube.com/embed/V9TOtDjk7Qs?rel=0" width="290" height="218" frameborder="0" allowfullscreen class="responsiveFrame" ></iframe> Code (markup): That is what pre CSS3 browsers will get for a size. Aka IE8/earlier. OH WELL. They still get the video so fine. THEN this CSS does the grunt-work. @media (min-width:442px) { .responsiveFrame { width:400px; height:300px; } } @media (min-width:642px) { .responsiveFrame { width:600px; height:450px; } } @media (min-width:782px) { .responsiveFrame { width:740px; height:555px; } } Code (markup): Or something to that effect. This technique is decent, but not very... efficient in terms of auto-sizing. The second method I only just came across recently - I like better as it gives you infinite sizes that will automatically fit whatever you put them into. The HTML just gets an extra DIV around it: <div class="responsiveFrame"> <iframe src="https://www.youtube.com/embed/V9TOtDjk7Qs?rel=0" width="290" height="218" frameborder="0" allowfullscreen ></iframe> </div> Code (markup): A cute thing in CSS elements is that percentage padding declarations are based on the parent element's width. If we absolute position the IFRAME inside the DIV, setting it's with and height to 100%, we can bottom pad the DIV a percentage height, which will keep the IFRAME the correct size always. .responsiveFrame { position:relative; /* We shouldn't have to declare a width on a DIV, but it fixes IE positioning thanks to "haslayout" all the way back to IE 5.5, but it ALSO fixes a quirk that can happen in some layouts in SOME versions of Firefox. Better safe than sorry! */ width:100%; /* padding bottom == desired frame aspect ratio. Basically just height divided by width as percent So 4:3 aspect would be 75%, 16:9 would be 56.25%, 5:4 would be 80%, etc, etc... */ padding-bottom:75%; } .responsiveFrame iframe { position:absolute; /* We shouldn't have to say top or left here, but... well... Some browsers have really crappy implementations of the spec */ top:0; left:0; width:100%; height:100%; } Code (markup): This method works in most all browsers, even older ones. The DIV will expand to the width of whatever you have it inside, the bottom padding will expand the height of the DIV to a percentage of that width, and the absolute positioned iframe inside it will scale to it's parent container. No scripttardery needed! Likely will work all the way back to at least IE6. People dive for the JS too quickly these days. 99.99% of the time if it's a layout issue, DON'T USE JAVASCRIPT as the answer!
I've been using something like: css .initialWidth { max-width: 740px; } .responsiveFrame { position: relative; margin-right: auto; margin-left: auto; padding-bottom: 60%; // This is the aspect ratio height: 0; overflow: hidden; } .responsiveFrame iframe { position: absolute; top: 0; left: 0; width: 100% !important; height: 100% !important; } Code (markup): html <div class="initialWidth"> <div class="responsiveFrame"> <iframe src="https://www.youtube.com/embed/V9TOtDjk7Qs?rel=0" frameborder="0" allowfullscreen></iframe> </div> </div> Code (markup): Totally fluid. Doesn't need @media. You can start it with whatever initial width you want. To adjust the initial height change: padding-bottom: 60%;
Which is the second method I posted, just without condensed properties, comments, a pixel max-width (boo, hiss), a height declaration for nothing, and there should be no legitimate reason to say !important since CSS trumps HTML attributes. Also since the only child is APO you shouldn't need to say overflow, and the 0 height declaration is mostly pointless too since the moment the iframe is aPo, the whitespace collapses to none thanks to no non-whitespace CDATA. But yeah, that's pretty much the same thing... though I'm wondering what video you'd have with a 5:3 aspect ratio.... or is that overcompensating for YT's controller since in non fullscreen the controls don't overlap the video? (which can be a smart idea)
For css I created a file in the root directory of the site... .initialWidth { max-width: 740px; } .responsiveFrame { position: relative; margin-right: auto; margin-left: auto; padding-bottom: 75%; // This is the aspect ratio height: 0; overflow: hidden; } .responsiveFrame iframe { position: absolute; top: 0; left: 0; width: 100% !important; height: 100% !important; } Code (CSS): And at this url http://m.switchandoutletwiringmadeeasy.com/2011nec/ I put <link rel="stylesheet" href="../style.css" type="text/css" charset="utf-8" /> in the head section and this in the body... <center> <div class="initialWidth"> <div class="responsiveFrame"> <iframe src="https://www.youtube.com/embed/V9TOtDjk7Qs?rel=0" frameborder="0" allowfullscreen></iframe> </div> </div> </center> HTML: and it appears to work great. I must tell you I have done a lot of html websites but I am very new in dealing with css I never have taken a likely to content management systems and was not truly happy with results from and have stuck with html and even separate mobile versions with proper mobile detection and coding so google does not see it as duplicate content. My next question is using the same css file how do I deal with webpages that have multiple embeds with different aspect ratios on each embed, and adding images that are also responsive in size display on the same webpage. Thanks
You have margin:auto, you don't need a CENTER tag. NOT that <center> has ANY damned business on any website written after 1997. For multiple aspect ratios you may have to just create classes for a bunch of stock ones, or resort to using the style attribute -- NORMALLY I rail against either practice as being sloppy code, but there's an exception to every rule... Particularly when HTML and CSS will often fight you on doing something that SHOULD be simple, but isn't. Really that page has a LOT of problems, like the disastrously "real world undeployable" XHTML 1.2 doctype, that is FILLED with HTML 3 code, endless pointless style attributes inlined in the markup, and no separation of presentation from content. It's a laundry list of how not to code a website any time over the past decade and a half!
so to deal with different aspect ratios just repeat the same code in css and make it .responsiveFrame2 then for additional aspects .responsiveFrame3 and so on and the same in the html is that correct? I do not think I have to repeat the .initialWidth ? I am using front page as an editor which may be creating some of the bad code, perhaps I should be using a more modern editor? I find sometimes when copying and pasting extra un necessary style code gets in. For images auto sizing to device width how is that declared in css and html My first website creation was pre 1999 and stayed with the same method and I have not really kept up with the times, and I guess I need to do that.
If your video widths are going to be the same on all pages, all you need to do is change the video link and keep the code the same. If the widths are going to change, then yes, you will need to change the .initialWidth (both the css and html). If you're planning to eventually have 100's of videos, you will need to consider a different CMS. You can't just manually create 100's of pages to accommodate your videos. Consider finding a good, clean responsive template and placing your content into it. That's what I'd do. Also, you do not have to have two separate sites (desktop / mobile). You need ONE site that will be responsive / fluid.
I think I have it all figured out, got a image wrapper code too, thank you, still a learning experience
I wrote this script - it appears to work fine on my side <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> </head> <body> <script type="text/javascript"> <!-- function iframe_embed() { var ifo = null; var s_w = null; var s_h = null; var div_container = null; s_w = parseInt(this.innerWidth); s_h = parseInt(this.innerHeight); ifo = document.createElement("iframe"); ifo.setAttribute("frameborder", "0"); ifo.allowFullscreen = true; div_container = document.createElement("div"); div_container.style.position = "absolute"; div_container.style.left = "0"; div_container.style.top = "0"; div_container.style.width = "99.999%"; //s_w + "px"; div_container.style.height = s_h + "px"; div_container.style.display = "block"; div_container.style.padding = "0"; div_container.style.margin = "0"; ifo.style.position = "relative"; ifo.style.left = "0"; ifo.style.top = "0"; ifo.style.width = "100%"; //s_w + "px"; ifo.style.height = s_h + "px"; ifo.style.display = "block"; ifo.style.padding = "0"; ifo.style.margin = "0"; ifo.style.backgroundColor = "#333333"; document.body.appendChild(div_container); div_container.appendChild(ifo); ifo.setAttribute("src", "https://www.youtube.com/embed/V9TOtDjk7Qs?rel=0"); } document.body.addEventListener("load", iframe_embed()); //--> </script> </body> </html> Code (markup):