메뉴 건너뛰기

동영상 bootstrap 반응형 CSS

Average Rating:
 0명 참여
Rate this page:
평점 한줄평 글쓴이 작성날짜

iframe 을 이용한 동영상의 표현 구조


<div class="embed-responsive embed-responsive-16by9">
      <iframe class="embed-responsive-item"  src="동영상 주소">
      </iframe>
</div>



표현에 필요한 스타일 속성


.embed-responsive {
  position: relative;
  display: block;
  height: 0;
  padding: 0;
  overflow: hidden;
}
.embed-responsive .embed-responsive-item,
.embed-responsive iframe,
.embed-responsive embed,
.embed-responsive object {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  height: 100%;
  width: 100%;
  border: 0;
}
.embed-responsive.embed-responsive-16by9 {
  padding-bottom: 56.25%;
}
.embed-responsive.embed-responsive-4by3 {
  padding-bottom: 75%;
}


출처 : http://getbootstrap.com/components/#responsive-embed


제목 날짜
Star Rating 별점 위젯 업데이트 정보   2014.03.09
modules/editor/tpl.js/uploader.js  
Zeroclipboard 적용하기   file
    10
xe jQuery 최신버전 사용하기 CDN  
    10
http://www.bootstrapcdn.com/   file
태그 목록