 <p>Because layouts are typically constructed from left to right, it is common for the right side of the image to be cropped off when it's dimensions exceeds the width of it's containing parent.</p> <p>Unfortunately, it is difficult to adjust the size of the <code>&lt;img /&gt;</code> element if you want to keep the aspect ratio <strong>and</strong> fill out all the available space. The former can be easily done with <code>width: 100%; max-width: 100%;</code>, but the latter is more of a challenge.</p> <p>That brings us to the utility of background size. CSS now supports values of background-size such as <code>cover</code>, which dictates that the background image will fill out the container yet retain aspect ratio, cropping off parts that we don't need.</p> <p><strong>CSS:</strong></p> <pre><code>.ls_video { background-size: cover; background-position: center center; margin-left: auto; margin-right: auto; width: 100%; height: 420px; text-align: left; } </code></pre> <p><strong>JS:</strong></p> <pre><code>var videoSrc = "http://www.youtube.com/embed/MxuIrIZbbu0"; var videoParms = "?autoplay=1&amp;amp;fs=1&amp;amp;hd=1&amp;amp;wmode=transparent"; var youtubeVideo = "" + "&lt;iframe class='ls_video' src='" + videoSrc + videoParms + "'&gt;" + "&lt;/iframe&gt;"; var theThumbNail = "" + "&lt;div onclick=\"this.innerHTML = youtubeVideo;\" style=\"background-image: url(images/MLSFthumbnail.jpg);\"&gt;&lt;/div&gt;"; document.write (theThumbNail); </code></pre>