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

페이지 정보

루루아빠 2,786 1 2015.09.15 02:05

짧은주소

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

평점

  • 평점 : 0점 (0명 참여)

본문

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
추천인
  • 추천해 주세요
6
루루아빠 - 회원등급 : 최고관리자 - 포인트 : 1,295,334
레벨 97
경험치 1,399,531

Progress Bar 10%

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

댓글1

루루아빠님의 댓글

루루아빠 글쓴이 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 242 건｜8／13 페이지
 태그
제목 글쓴이 날짜 조회 추천
이윰  🏆 특정 게시판을 메인 홈으로 보여주기 루루아빠 2017.12.13 2,646 0
이윰  🏆 Q&A 게시판 최신글추출시 '비밀글입니다.' 를 원글 제목으로 변경하기 루루아빠 2015.10.20 2,643 0
이윰  🏆 Eyoom Builder 1.3.11 패치 루루아빠 2017.11.21 2,633 0
이윰  🏆 모바일에서 이미지 넓이 높이 태그 제거하기 루루아빠 2015.05.07 2,622 1
이윰  🏆 블로그 스킨(masonry)에서 Lazy Load(unveil) 사용시 목록 올바르게 보여 주기 루루아빠 2016.11.16 2,613 0
이윰  🏆 Eyoom Builder 1.1.11 패치 루루아빠 2015.10.15 2,606 0
이윰  댓글+7개🏆 유튜브 플레이리스트(playlist) 썸네일 추출과 올바르게 적용하기 shadow2fox 2021.09.01 2,606 3
이윰  🏆 Eyoom Builder 1.2.6 패치 루루아빠 2016.08.26 2,601 0
이윰  🏆 이윰레벨을 사용치 않고 그누레벨만 사용하기 루루아빠 2016.05.17 2,594 0
이윰  댓글+1개🏆 카카오TV 플레이어 최신 버전 재생 오류 해결하기 shadow2fox 2019.03.11 2,592 1
이윰  🏆 이윰빌더 시즌1 → 시즌4 업그레이드 가이드 shadow2fox 2018.10.05 2,591 0
이윰  댓글+5개🏆 게시글 작성 시 외부 이미지를 저장하여 썸네일화하기 shadow2fox 2021.01.01 2,580 2
이윰  🏆 Eyoom Builder 1.2.5 패치 루루아빠 2016.06.10 2,580 0
이윰  🏆 스크랩할때 댓글 적지 않아도 스크랩 허용하기 루루아빠 2015.09.22 2,571 0
이윰  🏆 Eyoom Builder 3.0.1 패치 루루아빠 2018.04.16 2,570 0
이윰  🏆 Eyoom Builder 1.3.8 패치 루루아빠 2017.11.21 2,563 0
이윰  🏆 이윰빌더에 태그 검색창 달기 루루아빠 2017.04.18 2,557 0
이윰  🏆 메인주소를 쇼핑몰로 사용하기 루루아빠 2016.07.27 2,553 0
이윰  🏆 블로그 스킨(blog skin) 갤러리 목록에서 box 이미지 높이 줄이기 루루아빠 2016.02.17 2,551 0
이윰  🏆 본문 내용 추출시 특정 태그 제거하기 루루아빠 2016.05.09 2,530 0
 태그

🏆 게시글 랭킹 탑10

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