created by http://livecoding.io

README.md

View this code at http://livecoding.io/11153438

options.json

{
    "libraries": [],
    "mode": "javascript",
    "layout": "fullscreen mode (vertical)",
    "resolution": "reset"
}

water.css

/* css goes here */
  .embed-container { 
	position: relative; 
	padding-bottom: 56.25%; 
	padding-top: 30px; 
	margin:15px 0; 
	overflow: hidden; 
	max-width: 100%; 
	height: auto; }
	
  .embed-container iframe, .embed-container object, .embed-container embed { 
	position: absolute; 
	top: 0; 
	left: 0; 
	width: 100%; 
	height: 100%; }

water.html

<!-- html goes here -->	

<div id="embed-container" >
	</div>

water.js

/* javascript goes here */	


var width = $(window).width(); // grab the window width

var smallUrl= "http://graphics.boston.com/multimedia/graphics/andrew/rub/aha.html?gif=/multimedia/graphics/andrew/gifs/stripgif640.gif"

var largeUrl= "http://graphics.boston.com/multimedia/graphics/andrew/rub/aha.html?gif=/multimedia/graphics/andrew/gifs/stripgif1232.gif"
	
if (width < 480) {
  	src = smallUrl;
}
else {
     src = largeUrl; }

	function createIframe(source){
		var iframe = document.createElement("iframe");
		iframe.src =  source;
		iframe.scrolling = "auto";
		iframe.frameborder = "0";
		iframe.width = "100%";
		iframe.height = "500px";
		document.getElementById("embed-container").appendChild(iframe);
	};

createIframe(src);

water.json

{}