한글 부트스트랩에 보면 유튜브 동영상을 반응형으로 하는 방법을 여기에서 볼 수 있습니다. 참고로 영문인 부트스트랩의 공식 홈페이지 Components(콤포넌트)의 Responsive Embed(반응형 임베드)에서도 배울 수 있습니다. 그럼 아래에서 간단히 유튜브를 반응형으로 하는 것을 설명하겠습니다.
1 먼저 유튜브 소스에 동영상 크기를 지정하는 width와 height를 지우고 class="embed-responsive-item"를 해줍니다.
2 위에서 동영상 크기를 지웠으니 동영상의 크기를 지정하기 위해 <div class="embed-responsive embed-responsive-16by9"> 유튜브 소스 </div>를 추가해주면 됩니다. 만약 동영상 크기가 4:3을 원한다면 <div class="embed-responsive embed-responsive-4by3">하면 됩니다. 반응형이니 동영상이 화면에 꽉 차게 됩니다. 화면에 꽉 차게 나오므로 해상도가 클 경우는 보기가 싫습니다.
그런데 이 블로그 아래쪽 사이드바 동영상에 사용한 것은 위와 같이 사용하지는 않았습니다. 왜냐하면 이전부터 특정 템플릿 소스에 있던 것을 사용해서 계속 사용하고 있습니다. 바꿔도 되는데 귀찮고 바꾸지 않아도 이상이 없어서요. 그 소스는 여기에 있습니다. 그래도 웬만하면 위와 같은 방식으로 유튜브를 반응형으로 하세요.
위 방법은 부트스트랩에 설명된 방법이지만 아래 부트스트랩 템플릿에 있었지만 부트스트랩이 아니어도 될 것 같다는 생각이 듭니다.
저는 거기 HTML 소스에서 class="vid" 부분이 유튜브를 반응형으로 하는 것입니다. 위와 다르게 티스토리 HTML/CSS 편집에서 CSS에 CSS를 추가해야 유튜브가 반응형이 됩니다.
위 두 가지 중에 둘 다 사용했는데 보듯이 큰 차이는 없습니다. 마음에 드는 것을 사용하세요. 부트스트랩은 유튜브를 삽입하면 반응형으로 하는 스크립트는 없습니다. 이렇게 귀찮게 할 필요 없이 스크립트 중에 유튜브를 삽입하면 반응형으로 만들어주는 것이 있으니 관심 있으면 알아보세요. 저는 유튜브를 많이 삽입하지도 않고 관심이 없어서요.
'IT.인터넷.생활 관련 > 부트스트랩' 카테고리의 다른 글
| 부트스트랩에서 풍선도움말, 툴팁 (0) | 2016.07.23 |
|---|---|
| 모달에 유튜브 동영상이 나오게,부트스트랩 (0) | 2016.07.08 |
| bootstrap, 부트스트랩 모달 (0) | 2016.07.07 |
| 부트스트랩 슬라이더 셋째 (0) | 2016.06.24 |
| 부트스트랩 슬라이더 둘째 (0) | 2016.02.23 |
| 부트스트랩 슬라이드 첫째, carousel 효과 (2) | 2016.02.20 |
| 익스플로러, 골치 아픈 낮은 버전 (2) | 2016.02.10 |
| 부트스트랩,ScrollSpy (0) | 2016.01.26 |
