ccurtin
2/6/2015 - 1:28 AM

Responsive Youtube Video, IFRAME, EMBED, or OBJECT

Responsive Youtube Video, IFRAME, EMBED, or OBJECT

add wrapper tag to oembeds.php
content_copyfile_download
<?php
add_filter('embed_oembed_html', 'my_embed_oembed_html', 99, 4);
function my_embed_oembed_html($html, $url, $attr, $post_id) {
  return '<div class="video">' . $html . '</div>';
}
?>
Responsive Youtube Video, IFRAME, EMBED, or OBJECT.md
content_copyfile_download
  • Rendered
  • Source

Responsive Youtube Video or IFRAME, EMBED, OBJECT, etc.


SASS

// If using more than a single column, TWO containers are requird like so;
    // Jeet Mixins col();
    // Custom media query mixin tabet();
.video-wrapper-col {
    @include col(1 / 2);
    @include tablet {
        @include col(1 / 1);
    }
}

.video {
    position: relative;
    overflow: hidden;
    height: 0;
    padding-top: 30px;
    padding-bottom: 56.25%;
}

.video iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}


HTML

<div class="video">
             <iframe src="http://www.youtube.com/embed/jh123871h23871gf" frameborder="0" width="560" height="315" allowfullscreen></iframe>
</div>

<div class="page-container">
  <!-- column one -->
  <div class="video-wrapper-col">
    <div class="video">
      <iframe width="100%" height="306" src="http://www.youtube.com/embed/jh123871h23871gf" frameborder="0" width="560" height="315" allowfullscreen></iframe>
    </div>
  </div>

  <!-- column two -->
  <div class="video-wrapper-col">
    <div class="video">
      <iframe width="100%" height="306" src="http://www.youtube.com/embed/jh123871h23871gf" frameborder="0" width="560" height="315" allowfullscreen></iframe>
    </div>
  </div>
</div><!-- .page-container -->