octocatstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Want a Run Button?

If active, the preview will update automatically when you change code.

            
              <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>
            
          
!
            
              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%;
}
            
          
!
            
              (function($){
  function resizeFrames() {
    $('.resizable').height($(window).width()*.5);
  }
  $(function() {
    $(window).resize(resizeFrames);
    resizeFrames();
  });
})(jQuery);
            
          
!
999px
Close

Asset uploading is a PRO feature.

As a PRO member, you can drag-and-drop upload files here to use as resources. Images, Libraries, JSON data... anything you want. You can even edit them anytime, like any other code on CodePen.

Go PRO

Loading ..................

Console