<div class="wrapper">
<h1>Responsive Video</h1>
<div class="video">
<iframe src="https://player.vimeo.com/video/15494850?title=0&amp;byline=0&amp;portrait=0&amp;autoplay=1" width="640" height="360" frameborder="0"></iframe> 
<p>Text below responsive video with a margin of 4em (4*16px=64px)...</p>
  <p class="resize">&gt; Resize me &lt;</p>

.video {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    margin-bottom: 4em;
.video iframe,
.video object,
.video embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

/*demo style only*/
body {
  font-family: sans-serif;
  background-color: #fff;
  color: #444;
  font-size: 16px;
.wrapper {
  background-color: #ddd;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
  padding: 1px 15px 1px;
h1 {
  font-size: 1.5em;
p {
  font-size: 1em;
.resize {
  text-align: right;
  font-size: .75em;

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.