[이윰] "부트스트랩" 기반 동영상 반응형 조정하기

페이지 정보

yadolee 루루아빠 3,360 1 2015.09.15 02:05:52

짧은주소

  • https://yadolee.com/tip/292 주소복사

본문

Responsive 16:9 YouTube

<div class="embed-responsive embed-responsive-16by9">
    <iframe class="embed-responsive-item" src="//www.youtube.com/embed/고유번호?wmode=opaque&autohide=1&showinfo=0&modestbranding=1&rel=0"></iframe>
</div>
Responsive 4:3 YouTube

<div class="embed-responsive embed-responsive-4by3">
    <iframe class="embed-responsive-item" src="//www.youtube.com/embed/고유번호?wmode=opaque&autohide=1&showinfo=0&modestbranding=1&rel=0"></iframe>
</div>
Responsive 16:9 Vimeo

<div class="embed-responsive embed-responsive-16by9">
    <iframe src="//player.vimeo.com/video/고유번호?wmode=opaque&autohide=1&showinfo=0&modestbranding=1&rel=0"></iframe>
</div>
Responsive 4:3 Vimeo

<div class="embed-responsive embed-responsive-4by3">
    <iframe src="//player.vimeo.com/video/고유번호?wmode=opaque&autohide=1&showinfo=0&modestbranding=1&rel=0"></iframe>
</div>
0
추천인
  • 추천해 주세요
yadolee
6
루루아빠 - 회원등급 : 최고관리자 - 포인트 : 1,346,240
레벨 101
경험치 1,519,440

Progress Bar 14.66%

- 가입일 : 2015-03-04 03:24:54
- 서명 : KNOW YOUR LIMITS BUT NEVER STOP TRYING TO EXCEED THEM !!
- 자기소개 : 루루의 자랑 루루아빠랍니다~~

  • 최신댓글이 없습니다.

댓글1

루루아빠님의 댓글

yadolee
루루아빠 글쓴이 2015.10.02 03:09
유튜브 영상 중 가로폭은 짧고 세로폭이 긴 영상을 위해 커스텀 css를 추가했다. 

.embed-responsive.embed-responsive-100 {
    padding-bottom: 100%;
}
.embed-responsive.embed-responsive-95 {
    padding-bottom: 95%;
}
.embed-responsive.embed-responsive-90 {
    padding-bottom: 90%;
}
.embed-responsive.embed-responsive-85 {
    padding-bottom: 85%;
}
.embed-responsive.embed-responsive-80 {
    padding-bottom: 80%;
}
사용법은 아래와 같으며 예제는 영상 가로폭을 100%로 설정한다는 의미이다.

축하합니다. 행운의 45경험치를 획득하였습니다.

Total 769 건｜18／26 페이지

 태그
제목 글쓴이 날짜 조회 추천
이윰  🏆 Bootstrap's Accordion 모두 펼치기 루루아빠 2015.10.20 3.4k 0
이윰  🏆 Eyoom Builder 1.1.12 패치 루루아빠 2015.10.19 3.5k 0
그누•영카트  🏆 영카트 5.1.2 (PHP7 대응 MySQLi 지원추가) 패치 루루아빠 2015.10.17 5.1k 0
그누•영카트  🏆 그누보드 5.1.3 (PHP7 대응 MySQLi 지원 추가) 패치 루루아빠 2015.10.17 3.3k 0
이윰  🏆 Eyoom Builder 1.1.11 패치 루루아빠 2015.10.15 3.0k 0
그누•영카트  🏆 전체목록보이기 체크시에도 이전글 이다음글 버튼 나타내기 루루아빠 2015.10.15 3.1k 0
그누•영카트  🏆 영카트 5.1.1 (카카오페이, 간편결제 추가) 패치 루루아빠 2015.10.11 3.5k 0
그누•영카트  🏆 영카트 5.1.0 (테마지원) 패치 루루아빠 2015.10.11 3.9k 0
그누•영카트  🏆 모바일에서 로고 이미지 올바르게 위치시키기 루루아빠 2015.10.11 3.3k 0
그누•영카트  🏆 그누보드 5.1.2 패치 루루아빠 2015.10.11 3.2k 0
이윰  🏆 모바일에서 btn-e-xs 버튼 크기로 간격 조절 루루아빠 2015.10.09 3.4k 0
그누•영카트  댓글+2개🏆 💾 네이버 웍스 모바일을 이용해 소유 도메인으로 메일 서비스 이용하기 루루아빠 2015.10.06 3.6k 1
이윰  🏆 Eyoom Builder 1.1.10 패치 루루아빠 2015.10.06 3.3k 0
이윰  🏆 syntaxhighlighter 관련 오류 수정 및 테마 변경 루루아빠 2015.10.01 3.7k 0
이윰  🏆 SNS 아이콘 툴팁 추가와 효과 바꾸기 루루아빠 2015.10.01 4.0k 0
이윰  댓글+2개🏆 쪽지 보낼때 캡챠코드 사용하지 않기 - 오류 루루아빠 2015.09.24 3.8k 0
이윰  🏆 쪽지 보내기 textarea(쪽지내용) 높이 키우기 루루아빠 2015.09.24 3.3k 0
이윰  🏆 스크랩할때 댓글 적지 않아도 스크랩 허용하기 루루아빠 2015.09.22 3.1k 0
이윰  🏆 게시판 목록에서 제목 바탕 부분을 클릭해도 본문으로 이동하기 루루아빠 2015.09.20 3.3k 0
이윰  🏆 게시글 작성시 전화번호 입력하고 구독자가 전화걸 수 있게 하기 루루아빠 2015.09.17 3.1k 0
HTML5  🏆 Google Drive로 공유된 동영상 Jwplayer를 통해 플레이하기 루루아빠 2015.09.15 3.4k 0
HTML5  🏆 Google Drive에 공유된 동영상 HTML5으로 플레이하기 루루아빠 2015.09.15 3.1k 0
이윰  댓글+1개🏆 🚩 "부트스트랩" 기반 동영상 반응형 조정하기 루루아빠 2015.09.15 3.4k 0
이윰  🏆 포인트 조회 팝업창으로 뛰우기 루루아빠 2015.09.14 4.2k 0
이윰  댓글+1개🏆 댓글(코멘트)에 외부 이미지를 넣어보기 루루아빠 2015.09.14 3.6k 0
이윰  🏆 인기검색어 관련 설정 바꾸기 루루아빠 2015.09.12 3.3k 0
기타  🏆 아이프레임 반응형 100%로 아닌 특정 크기로 가운데 정렬하기 루루아빠 2015.09.11 3.6k 0
기타  댓글+1개🏆 Jwplayer 반응형으로 검정화면 없이 꽉차게 만들기 루루아빠 2015.09.08 4.5k 0
이윰  댓글+2개🏆 사운드클라우드 embed options 제어하기 루루아빠 2015.09.07 4.1k 0
그누•영카트  🏆 영카트 이미지 가운데 정렬과 이미지 간격 수정 루루아빠 2015.08.28 3.1k 0
 태그
다음 페이지
이전 페이지

🏆 게시글 랭킹 탑10

랭킹 글내용 조회
1
특정 div의 내용을 일정 시간마다 새로고침하기
루루아빠 2016-03-20 06:24 		15.6k
2
영카트 5.3.2.9
shadow2fox 2019-05-30 00:39 		12.1k
3
button으로 유튜브 재생 및 정지 제어하기 댓글 +1개
루루아빠 2017-02-21 19:12 		10.4k
4
그누보드 5.4.4 댓글 +2개
shadow2fox 2021-01-05 10:58 		9.3k
5
jQuery를 이용한 링크 자동 클릭(auto click) 댓글 +2개
루루아빠 2015-06-27 02:19 		9.0k
6
CKeditor 4.x 소스 보기시 자동으로 공백 태그( ) 추가되는 문제 해결하기 댓글 +1개
루루아빠 2016-05-20 21:53 		8.2k
7
modal 오픈시 modal-dialog 아래 background body 스크롤 안되게 하기
루루아빠 2015-07-16 00:05 		7.2k
8
[PHP 7.2.x] count(): Parameter must be an array or an object that implements Countable 에러 해결하기 댓글 +1개
shadow2fox 2020-03-09 14:37 		7.2k
9
이윰빌더와 그누보드 패치시 수정할 파일들
루루아빠 2015-06-23 19:13 		7.0k
10
영카트 5.0.41 패치
루루아빠 2015-07-13 14:53 		6.8k