백.전.백.승.

배경에 나오는 유튜브는 [파묘] 입니다. 그리고 이전은 [윙카] 이었습니다. 참고로 유튜브 배경 멈춤, 소리, 재생 등은 오른쪽 상단 플레이바를 사용하면 됩니다.

Made with Bootstrap 3 And Powered by Tistory

한글 부트스트랩에 보면 유튜브 동영상을 반응형으로 하는 방법을 여기에서 볼 수 있습니다. 참고로 영문인 부트스트랩의 공식 홈페이지 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.인터넷.생활 관련/부트스트랩' 관련된 글 MORE



Close 방명록
×

카테고리




×
×