내 블로그 모든 유튜브 동영상 반응형으로 바꾸기! - 5분이면 끝
이전에 쓰던 square(스퀘어) 스킨과 다르게
북클럽 스킨에서는 유튜브 영상이 반응형으로 되지 않는다.
즉 모바일에서는 동영상 크기가 맞춰지지 않아
이상하게 배치된다는 이야기이다.
그래서 급하게 방법을 찾으러 다녔는데
영상 올릴 때마다 일일이 HTML 코드를 수정해줘야 하는 방법밖에 없었다.
스퀘어 스킨 때 그냥 유튜브 코드 긁어와서 그냥 업로드 하는데도 된 걸 보면,
다른 방법이 있을 것이라고 생각되서 계속 찾아봤는데
내가 원하던 방법을 찾았다.
나중에 또 스킨을 바꿀 때가 있을 수 있으니
방법을 저장해놓을 겸 포스팅 해보려고 한다.
자바스크립트 파일 다운로드
방법
- 블로그 관리 클릭
- 스킨편집 클릭
- HTML 편집 클릭
- 파일 업로드 클릭
- 자바 스크립트 파일 추가
- HTML에서 Ctrl + F를 눌러 "/body" 찾기
- "/body" 위에 아래에 있는 코드 붙여넣기
<!--유튜브 반응형-->
<script src="./images/jquery.fitvids.js"></script>
<script>
// Basic FitVids
$("!!주의사항 확인!!").fitVids();
</script>
주의사항
$("!!주의사항 확인!!")에서 !!주의사항 확인!! 이 부분은 내 본문을 포함하는 Class 값을 넣어야 한다.
예를 들면 내가 쓰는 스킨은 Bookclub이라는 스킨인데
이 스킨에서
이전에 쓰던 square(스퀘어) 스킨과 다르게 북클럽 스킨에서는 유튜브 영상이 반응형으로 되지 않는다. 즉 모바일에서는 동영상 크기가 맞춰지지 않아 이상하게 배치된다는 이야기이다. 그래서 급하게 방법을 찾으러 다녔는데 영상 올릴 때마다 일일이 HTML 코드를 수정해줘야 하는 방법밖에 없었다. 스퀘어 스킨 때 그냥 유튜브 코드 긁어와서 그냥 업로드 하는데도 된 걸 보면, 다른 방법이 있을 것이라고 생각되서 계속 찾아봤는데 내가 원하던 방법을 찾았다. 나중에 또 스킨을 바꿀 때가 있을 수 있으니 방법을 저장해놓을 겸 포스팅 해보려고 한다. $("!!주의사항 확인!!")에서 !!주의사항 확인!! 이 부분은 내 본문을 포함하는 Class 값을 넣어야 한다. 예를 들면 내가 쓰는 스킨은 Bookclub이라는 스킨인데 이 스킨에서 을 포함하는 Class 값은 "entry-content" 이다. (사진확인) 즉 Ctrl + F를 눌러서 를 검색해서 클래스 값을 확인 후 !!주의사항 확인!!을 지우고 .entry-content(나의 클래스 값)을 넣어야 한다. 다시 말하지만 절대 .entry-content을 넣는 것이 아니라 나의 클래스 값을 넣는 것이다. 그리고 클래스 값 앞에 꼭 " . (온점)"을 넣어야 한다. 내 블로그 모든 유튜브 동영상 반응형으로 바꾸기! - 5분이면 끝
자바스크립트 파일 다운로드
방법
<!--유튜브 반응형-->
<script src="./images/jquery.fitvids.js"></script>
<script>
// Basic FitVids
$("!!주의사항 확인!!").fitVids();
</script>주의사항
출처
Davatron5000
즉 Ctrl + F를 눌러서
이전에 쓰던 square(스퀘어) 스킨과 다르게 북클럽 스킨에서는 유튜브 영상이 반응형으로 되지 않는다. 즉 모바일에서는 동영상 크기가 맞춰지지 않아 이상하게 배치된다는 이야기이다. 그래서 급하게 방법을 찾으러 다녔는데 영상 올릴 때마다 일일이 HTML 코드를 수정해줘야 하는 방법밖에 없었다. 스퀘어 스킨 때 그냥 유튜브 코드 긁어와서 그냥 업로드 하는데도 된 걸 보면, 다른 방법이 있을 것이라고 생각되서 계속 찾아봤는데 내가 원하던 방법을 찾았다. 나중에 또 스킨을 바꿀 때가 있을 수 있으니 방법을 저장해놓을 겸 포스팅 해보려고 한다. $("!!주의사항 확인!!")에서 !!주의사항 확인!! 이 부분은 내 본문을 포함하는 Class 값을 넣어야 한다. 예를 들면 내가 쓰는 스킨은 Bookclub이라는 스킨인데 이 스킨에서 을 포함하는 Class 값은 "entry-content" 이다. (사진확인) 즉 Ctrl + F를 눌러서 를 검색해서 클래스 값을 확인 후 !!주의사항 확인!!을 지우고 .entry-content(나의 클래스 값)을 넣어야 한다. 다시 말하지만 절대 .entry-content을 넣는 것이 아니라 나의 클래스 값을 넣는 것이다. 그리고 클래스 값 앞에 꼭 " . (온점)"을 넣어야 한다. 내 블로그 모든 유튜브 동영상 반응형으로 바꾸기! - 5분이면 끝
자바스크립트 파일 다운로드
방법
<!--유튜브 반응형-->
<script src="./images/jquery.fitvids.js"></script>
<script>
// Basic FitVids
$("!!주의사항 확인!!").fitVids();
</script>주의사항
출처
Davatron5000
!!주의사항 확인!!을 지우고 .entry-content(나의 클래스 값)을 넣어야 한다.
다시 말하지만 절대 .entry-content을 넣는 것이 아니라
나의 클래스 값을 넣는 것이다.
그리고 클래스 값 앞에 꼭 " . (온점)"을 넣어야 한다.
출처
Davatron5000
댓글