A CodePen by 야무. RWD Media :: jQuery Plugin - 반응형 웹 디자인에 적용 가능한 유연한 미디어(embed, object, iframe) 처리 jQuery 플러그인입니다.

index.slim

div#page

  / vimeo 영상

  iframe class="rwd-video" src="http://player.vimeo.com/video/48857883?title=0&byline=0&portrait=0&color=ff9933" width="400" height="300" webkitAllowFullScreen mozallowfullscreen allowFullScreen

  / youtube 영상

  iframe class="rwd-video" width="640" height="360" src="http://www.youtube-nocookie.com/embed/rHAKK6eDsU4?list=PLvaeCFvGpjsNc9lvJ2TribIiN3-g8Bkyu&hl=ko_KR" allowfullscreen

script.js

// 플러그인 코드
(function($){
  
  $.fn.rwdMedia = function(options) {
    options = $.extend({}, $.fn.rwdMedia.options, options);
    return this.each(function() {
      var $this = $(this);
      $this.wrap('<div class="rwd-video-container"/>');
      if(options.limit) { $this.parent().wrap('<div class="rwd-video-limit"/>');}
      if(options.width) { $this.parents('.rwd-video-limit').css('width', options.width + 'px');}
      if(options.ratio) { $this.parents('.rwd-video-container').css('padding-bottom', (options.ratio * 100) + '%')}
    })
  }
  
  // 플러그인 기본 옵션
  $.fn.rwdMedia.options = {
    'limit': false,
    'width': null,
    'ratio': null
  }
    
})(window.jQuery);


// 플러그인 실행 코드
$('.rwd-video').rwdMedia({
  'limit': true,
  'width': 800,
  'ratio': 300/400
});

style.sass

@import "compass"
// --------------------------
// 기본 코드
// --------------------------
html
  background: #313131

iframe, a img
  border: none

#page
  margin: 20px 20%

// --------------------------
// 반응형 미디어 스타일 rwd-video
// --------------------------
.rwd-video-limit
  max-width: 100%

.rwd-video-container
  overflow: hidden
  position: relative
  height: 0
  margin-bottom: 20px
  // padding-bottom: 75% /* 미디어 세로/가로 비율 ::  예) 300/400 * 100%  */

.rwd-video
  position: absolute
  top: 0
  left: 0
  width: 100%
  height: 100%