CodePen

HTML

            
              <div class="example">
	<h2>Default Embed</h2>
	<!-- This is how embedded images come, by default. Note the width/height attributes. -->
	<iframe id="default" src="//embed.gettyimages.com/embed/99988737?et=6ByDxLYTs0KXzTw7z9kRYg&sig=oWd6tWLWxwiD053DMErYnVMb8TW_qsSV_A6omVqHoTg=" width="594" height="462" frameborder="0" scrolling="no"></iframe>
</div>

<div class="example">
	<h2>Without Width/Height Attributes</h2>
	<!-- Removing the width/height rules to rely on CSS for sizing. -->
	<iframe class="full-width" src="//embed.gettyimages.com/embed/99988737?et=6ByDxLYTs0KXzTw7z9kRYg&sig=oWd6tWLWxwiD053DMErYnVMb8TW_qsSV_A6omVqHoTg=" frameborder="0" scrolling="no"></iframe>
</div>

<div class="example">
	<h2>With Width Attribute</h2>
	<!-- Setting just the width attribute. -->
	<iframe src="//embed.gettyimages.com/embed/99988737?et=6ByDxLYTs0KXzTw7z9kRYg&sig=oWd6tWLWxwiD053DMErYnVMb8TW_qsSV_A6omVqHoTg=" width="594" frameborder="0" scrolling="no"></iframe>
</div>

<div class="example">
	<h2>With Height Attribute</h2>
	<!-- Setting just the height attribute. -->
	<iframe src="//embed.gettyimages.com/embed/99988737?et=6ByDxLYTs0KXzTw7z9kRYg&sig=oWd6tWLWxwiD053DMErYnVMb8TW_qsSV_A6omVqHoTg=" height="462" frameborder="0" scrolling="no"></iframe>
</div>

<div class="example">
	<h2>With Height Attribute and CSS Width Rule</h2>
	<!-- Setting the height attribute and a CSS rule for 100% width. -->
	<iframe class="full-width" src="//embed.gettyimages.com/embed/99988737?et=6ByDxLYTs0KXzTw7z9kRYg&sig=oWd6tWLWxwiD053DMErYnVMb8TW_qsSV_A6omVqHoTg=" height="462" frameborder="0" scrolling="no"></iframe>
</div>

<div class="example">
	<h2>With Height Attribute, CSS Width Rule, and JavaScript Resizing the Height Attribute</h2>
	<!-- Setting the height attribute, a CSS rule for 100% width, and adding some JavaScript to resize the iframe’s height attribute as the window resizes. -->
	<iframe class="full-width resizable" src="//embed.gettyimages.com/embed/99988737?et=6ByDxLYTs0KXzTw7z9kRYg&sig=oWd6tWLWxwiD053DMErYnVMb8TW_qsSV_A6omVqHoTg=" height="462" frameborder="0" scrolling="no"></iframe>
</div>
            
          
!

CSS

            
              html, body {
  background: #1d1f20;
  height: 100%;
}

body {
  font: 16px/1 "Helvetica Neue", Helvetica, Arial, sans-serif;
}

h2 {
  margin-bottom: 10px;
  font-size: 2em;
  font-weight: lighter;
  letter-spacing: .025em;
  color: #fff;
}

.example {
  display: block;
  margin-bottom: 50px;
}

.full-width {
  width: 100%;
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              (function($){
  function resizeFrames() {
    $('.resizable').height($(window).width()*.5);
  }
  $(function() {
    $(window).resize(resizeFrames);
    resizeFrames();
  });
})(jQuery);
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................