티스토리 블로그 북클럽 스킨, 유튜브 영상을 반응형으로 만드는 법

---

 

오늘은 블로그에 유튜브 영상을 반응형으로 올릴 수 있는 방법을 소개하겠습니다.

 

 

 

반응형이란?

 

'반응형'이라는 단어의 사전적 의미는 '유전자와 환경의 상호 작용에 따라 동일한 표현형을 나타내는 개체의 무리'입니다.

 

 

 

블로그의 스킨들 중에서 유튜브의 영상을 올렸을 때 영상이 작게 올라가는 스킨들이 있습니다.

위의 이미지와 같이 지금 이 블로그의 스킨인 북클럽 스킨도 그렇습니다.

딱 봐도 뭔가 답답해 보이죠.

스킨은 반응형 스킨인데, 왜 유튜브는 반응형으로 나오지 않는지 모르겠습니다.

 

 

 

티스토리의 또 다른 반응형 스킨인 #2 스킨입니다.

이 스킨 같은 경우에는 별도로 수정을 하지 않아도 처음부터 이렇게 유튜브의 영상이 반응형으로 올라갑니다.

딱 봐도 #2 스킨이 훨씬 보기에 좋습니다.

 

지금부터 북클럽 스킨의 이러한 현상을, 혹은 북클럽 스킨은 아니지만 어쨌든 유튜브 영상이 반응형으로 올라가지 않는 스킨들을 스킨 편집으로 영상이 프레임에 가득 차게 큰 화면으로 올리는 방법을 알아보겠습니다.

 

 

 

 

꾸미기 > 스킨 편집으로..

 

티스토리 블로그 html 편집 들어가는 법

티스토리 블로그의 스킨 편집을 어떻게 하는지 전혀 모르시는 분들은 아래부터의 설명을 봐도 무슨 말인지 모를 수도 있으니, 막히는 부분이 생기면 위의 글도 봐보시길 바랍니다.

 

 

 

jquery.fitvids.zip

0.00MB

먼저 위의 압축파일을 다운로드 받아서, 안에 들어있는 자바스크립트 파일을 압축해제 해주시길 바랍니다.

 

 

 

'블로그 관리'에서 꾸미기 > 스킨 편집 > html 편집 > 파일 업로드로 들어갑니다.

하단의 +추가 버튼을 클릭해서 jquery.fitvids.js 파일을 업로드합니다.

 

 

 

자동으로 images/ 의 하위로 업로드가 됩니다.

제대로 업로드가 되었는지 확인을 하고 html 편집으로 갑니다.

 

 

 

스크롤을 제일 하단으로 내려서 바디 태그가 끝나는 지점인 </body>를 찾아줍니다.

</body>의 바로 위에 이 소스 코드를 넣어줍니다.

 

 

 

<!-- 유튜브 반응형 --> <script src="./images/jquery.fitvids.js"></script> <script>$(".entry-content").fitVids();</script>

위의 소스 코드는 PC에서 드래그 후,
ctrl+x로 잘라내서 다른 곳으로 붙여넣기가 가능합니다.
ctrl+c(복사)는 불가능합니다.

 

 

 

참고로 여기서 중요한 점은, 이걸 따라 하시는 분의 블로그 스킨도 티스토리 북클럽 스킨이라면 그대로 붙여넣고 저장을 하시면 되지만, 다른 스킨이라면 ".entry-content" 부분을 수정해야 합니다.

 

 

 

 

소스 코드 내의 검색을 이용해서

---

 

오늘은 블로그에 유튜브 영상을 반응형으로 올릴 수 있는 방법을 소개하겠습니다.

 

 

 

반응형이란?

 

'반응형'이라는 단어의 사전적 의미는 '유전자와 환경의 상호 작용에 따라 동일한 표현형을 나타내는 개체의 무리'입니다.

 

 

 

블로그의 스킨들 중에서 유튜브의 영상을 올렸을 때 영상이 작게 올라가는 스킨들이 있습니다.

위의 이미지와 같이 지금 이 블로그의 스킨인 북클럽 스킨도 그렇습니다.

딱 봐도 뭔가 답답해 보이죠.

스킨은 반응형 스킨인데, 왜 유튜브는 반응형으로 나오지 않는지 모르겠습니다.

 

 

 

티스토리의 또 다른 반응형 스킨인 #2 스킨입니다.

이 스킨 같은 경우에는 별도로 수정을 하지 않아도 처음부터 이렇게 유튜브의 영상이 반응형으로 올라갑니다.

딱 봐도 #2 스킨이 훨씬 보기에 좋습니다.

 

지금부터 북클럽 스킨의 이러한 현상을, 혹은 북클럽 스킨은 아니지만 어쨌든 유튜브 영상이 반응형으로 올라가지 않는 스킨들을 스킨 편집으로 영상이 프레임에 가득 차게 큰 화면으로 올리는 방법을 알아보겠습니다.

 

 

 

 

꾸미기 > 스킨 편집으로..

 

티스토리 블로그 html 편집 들어가는 법

티스토리 블로그의 스킨 편집을 어떻게 하는지 전혀 모르시는 분들은 아래부터의 설명을 봐도 무슨 말인지 모를 수도 있으니, 막히는 부분이 생기면 위의 글도 봐보시길 바랍니다.

 

 

 

jquery.fitvids.zip

0.00MB

먼저 위의 압축파일을 다운로드 받아서, 안에 들어있는 자바스크립트 파일을 압축해제 해주시길 바랍니다.

 

 

 

'블로그 관리'에서 꾸미기 > 스킨 편집 > html 편집 > 파일 업로드로 들어갑니다.

하단의 +추가 버튼을 클릭해서 jquery.fitvids.js 파일을 업로드합니다.

 

 

 

자동으로 images/ 의 하위로 업로드가 됩니다.

제대로 업로드가 되었는지 확인을 하고 html 편집으로 갑니다.

 

 

 

스크롤을 제일 하단으로 내려서 바디 태그가 끝나는 지점인 </body>를 찾아줍니다.

</body>의 바로 위에 이 소스 코드를 넣어줍니다.

 

 

 

<!-- 유튜브 반응형 --> <script src="./images/jquery.fitvids.js"></script> <script>$(".entry-content").fitVids();</script>

위의 소스 코드는 PC에서 드래그 후,
ctrl+x로 잘라내서 다른 곳으로 붙여넣기가 가능합니다.
ctrl+c(복사)는 불가능합니다.

 

 

 

참고로 여기서 중요한 점은, 이걸 따라 하시는 분의 블로그 스킨도 티스토리 북클럽 스킨이라면 그대로 붙여넣고 저장을 하시면 되지만, 다른 스킨이라면 ".entry-content" 부분을 수정해야 합니다.

 

 

 

 

소스 코드 내의 검색을 이용해서 를 찾습니다.

그러면 를 감싸고 있는 <div>태그가 있는데, 그 태그의 class 값을 넣어주시면 됩니다.

 

예를 들어, 본인의 스킨에는 를 감싸고 있는 <div>태그의 클래스 값이

 

<div class="hello">

</div>

 

이렇게 "hello"라고 되어있다면, 아까 위에서 복사했던 소스 코드도,

 

<!-- 유튜브 반응형 -->
<script src="./images/jquery.fitvids.js"></script>
<script>$(".hello").fitVids();</script>

 

라고 수정을 해주어야 합니다.

그리고 적용을 클릭하면 끝!

 

 

 

그리고 다시 확인하면 이렇게 블로그에 올린 유튜브 영상이 스킨의 크기에 딱 맞게 올라온 것을 확인할 수 있습니다.

 

 

 

 

 

 

첨부한 자바스크립트 파일의 소스 코드 출처

GitHub - davatron5000/FitVids.js: A lightweight, easy-to-use jQuery plugin for fluid width video embeds.

 

 

 

---

이 글이 도움이 됐다면 하단의 ♡ 공감 버튼을 꾹 눌러서
빨간 하트♥로 만들어주세요.
지인에게 보여주고 싶은 글이었다면
공감 버튼 옆을 클릭해서 SNS에 공유해주세요.
댓글은 블로그 운영에 큰 힘이 됩니다.

 

---

 

를 찾습니다.

그러면

---

 

오늘은 블로그에 유튜브 영상을 반응형으로 올릴 수 있는 방법을 소개하겠습니다.

 

 

 

반응형이란?

 

'반응형'이라는 단어의 사전적 의미는 '유전자와 환경의 상호 작용에 따라 동일한 표현형을 나타내는 개체의 무리'입니다.

 

 

 

블로그의 스킨들 중에서 유튜브의 영상을 올렸을 때 영상이 작게 올라가는 스킨들이 있습니다.

위의 이미지와 같이 지금 이 블로그의 스킨인 북클럽 스킨도 그렇습니다.

딱 봐도 뭔가 답답해 보이죠.

스킨은 반응형 스킨인데, 왜 유튜브는 반응형으로 나오지 않는지 모르겠습니다.

 

 

 

티스토리의 또 다른 반응형 스킨인 #2 스킨입니다.

이 스킨 같은 경우에는 별도로 수정을 하지 않아도 처음부터 이렇게 유튜브의 영상이 반응형으로 올라갑니다.

딱 봐도 #2 스킨이 훨씬 보기에 좋습니다.

 

지금부터 북클럽 스킨의 이러한 현상을, 혹은 북클럽 스킨은 아니지만 어쨌든 유튜브 영상이 반응형으로 올라가지 않는 스킨들을 스킨 편집으로 영상이 프레임에 가득 차게 큰 화면으로 올리는 방법을 알아보겠습니다.

 

 

 

 

꾸미기 > 스킨 편집으로..

 

티스토리 블로그 html 편집 들어가는 법

티스토리 블로그의 스킨 편집을 어떻게 하는지 전혀 모르시는 분들은 아래부터의 설명을 봐도 무슨 말인지 모를 수도 있으니, 막히는 부분이 생기면 위의 글도 봐보시길 바랍니다.

 

 

 

jquery.fitvids.zip

0.00MB

먼저 위의 압축파일을 다운로드 받아서, 안에 들어있는 자바스크립트 파일을 압축해제 해주시길 바랍니다.

 

 

 

'블로그 관리'에서 꾸미기 > 스킨 편집 > html 편집 > 파일 업로드로 들어갑니다.

하단의 +추가 버튼을 클릭해서 jquery.fitvids.js 파일을 업로드합니다.

 

 

 

자동으로 images/ 의 하위로 업로드가 됩니다.

제대로 업로드가 되었는지 확인을 하고 html 편집으로 갑니다.

 

 

 

스크롤을 제일 하단으로 내려서 바디 태그가 끝나는 지점인 </body>를 찾아줍니다.

</body>의 바로 위에 이 소스 코드를 넣어줍니다.

 

 

 

<!-- 유튜브 반응형 --> <script src="./images/jquery.fitvids.js"></script> <script>$(".entry-content").fitVids();</script>

위의 소스 코드는 PC에서 드래그 후,
ctrl+x로 잘라내서 다른 곳으로 붙여넣기가 가능합니다.
ctrl+c(복사)는 불가능합니다.

 

 

 

참고로 여기서 중요한 점은, 이걸 따라 하시는 분의 블로그 스킨도 티스토리 북클럽 스킨이라면 그대로 붙여넣고 저장을 하시면 되지만, 다른 스킨이라면 ".entry-content" 부분을 수정해야 합니다.

 

 

 

 

소스 코드 내의 검색을 이용해서 를 찾습니다.

그러면 를 감싸고 있는 <div>태그가 있는데, 그 태그의 class 값을 넣어주시면 됩니다.

 

예를 들어, 본인의 스킨에는 를 감싸고 있는 <div>태그의 클래스 값이

 

<div class="hello">

</div>

 

이렇게 "hello"라고 되어있다면, 아까 위에서 복사했던 소스 코드도,

 

<!-- 유튜브 반응형 -->
<script src="./images/jquery.fitvids.js"></script>
<script>$(".hello").fitVids();</script>

 

라고 수정을 해주어야 합니다.

그리고 적용을 클릭하면 끝!

 

 

 

그리고 다시 확인하면 이렇게 블로그에 올린 유튜브 영상이 스킨의 크기에 딱 맞게 올라온 것을 확인할 수 있습니다.

 

 

 

 

 

 

첨부한 자바스크립트 파일의 소스 코드 출처

GitHub - davatron5000/FitVids.js: A lightweight, easy-to-use jQuery plugin for fluid width video embeds.

 

 

 

---

이 글이 도움이 됐다면 하단의 ♡ 공감 버튼을 꾹 눌러서
빨간 하트♥로 만들어주세요.
지인에게 보여주고 싶은 글이었다면
공감 버튼 옆을 클릭해서 SNS에 공유해주세요.
댓글은 블로그 운영에 큰 힘이 됩니다.

 

---

 

를 감싸고 있는 <div>태그가 있는데, 그 태그의 class 값을 넣어주시면 됩니다.

 

예를 들어, 본인의 스킨에는

---

 

오늘은 블로그에 유튜브 영상을 반응형으로 올릴 수 있는 방법을 소개하겠습니다.

 

 

 

반응형이란?

 

'반응형'이라는 단어의 사전적 의미는 '유전자와 환경의 상호 작용에 따라 동일한 표현형을 나타내는 개체의 무리'입니다.

 

 

 

블로그의 스킨들 중에서 유튜브의 영상을 올렸을 때 영상이 작게 올라가는 스킨들이 있습니다.

위의 이미지와 같이 지금 이 블로그의 스킨인 북클럽 스킨도 그렇습니다.

딱 봐도 뭔가 답답해 보이죠.

스킨은 반응형 스킨인데, 왜 유튜브는 반응형으로 나오지 않는지 모르겠습니다.

 

 

 

티스토리의 또 다른 반응형 스킨인 #2 스킨입니다.

이 스킨 같은 경우에는 별도로 수정을 하지 않아도 처음부터 이렇게 유튜브의 영상이 반응형으로 올라갑니다.

딱 봐도 #2 스킨이 훨씬 보기에 좋습니다.

 

지금부터 북클럽 스킨의 이러한 현상을, 혹은 북클럽 스킨은 아니지만 어쨌든 유튜브 영상이 반응형으로 올라가지 않는 스킨들을 스킨 편집으로 영상이 프레임에 가득 차게 큰 화면으로 올리는 방법을 알아보겠습니다.

 

 

 

 

꾸미기 > 스킨 편집으로..

 

티스토리 블로그 html 편집 들어가는 법

티스토리 블로그의 스킨 편집을 어떻게 하는지 전혀 모르시는 분들은 아래부터의 설명을 봐도 무슨 말인지 모를 수도 있으니, 막히는 부분이 생기면 위의 글도 봐보시길 바랍니다.

 

 

 

jquery.fitvids.zip

0.00MB

먼저 위의 압축파일을 다운로드 받아서, 안에 들어있는 자바스크립트 파일을 압축해제 해주시길 바랍니다.

 

 

 

'블로그 관리'에서 꾸미기 > 스킨 편집 > html 편집 > 파일 업로드로 들어갑니다.

하단의 +추가 버튼을 클릭해서 jquery.fitvids.js 파일을 업로드합니다.

 

 

 

자동으로 images/ 의 하위로 업로드가 됩니다.

제대로 업로드가 되었는지 확인을 하고 html 편집으로 갑니다.

 

 

 

스크롤을 제일 하단으로 내려서 바디 태그가 끝나는 지점인 </body>를 찾아줍니다.

</body>의 바로 위에 이 소스 코드를 넣어줍니다.

 

 

 

<!-- 유튜브 반응형 --> <script src="./images/jquery.fitvids.js"></script> <script>$(".entry-content").fitVids();</script>

위의 소스 코드는 PC에서 드래그 후,
ctrl+x로 잘라내서 다른 곳으로 붙여넣기가 가능합니다.
ctrl+c(복사)는 불가능합니다.

 

 

 

참고로 여기서 중요한 점은, 이걸 따라 하시는 분의 블로그 스킨도 티스토리 북클럽 스킨이라면 그대로 붙여넣고 저장을 하시면 되지만, 다른 스킨이라면 ".entry-content" 부분을 수정해야 합니다.

 

 

 

 

소스 코드 내의 검색을 이용해서 를 찾습니다.

그러면 를 감싸고 있는 <div>태그가 있는데, 그 태그의 class 값을 넣어주시면 됩니다.

 

예를 들어, 본인의 스킨에는 를 감싸고 있는 <div>태그의 클래스 값이

 

<div class="hello">

</div>

 

이렇게 "hello"라고 되어있다면, 아까 위에서 복사했던 소스 코드도,

 

<!-- 유튜브 반응형 -->
<script src="./images/jquery.fitvids.js"></script>
<script>$(".hello").fitVids();</script>

 

라고 수정을 해주어야 합니다.

그리고 적용을 클릭하면 끝!

 

 

 

그리고 다시 확인하면 이렇게 블로그에 올린 유튜브 영상이 스킨의 크기에 딱 맞게 올라온 것을 확인할 수 있습니다.

 

 

 

 

 

 

첨부한 자바스크립트 파일의 소스 코드 출처

GitHub - davatron5000/FitVids.js: A lightweight, easy-to-use jQuery plugin for fluid width video embeds.

 

 

 

---

이 글이 도움이 됐다면 하단의 ♡ 공감 버튼을 꾹 눌러서
빨간 하트♥로 만들어주세요.
지인에게 보여주고 싶은 글이었다면
공감 버튼 옆을 클릭해서 SNS에 공유해주세요.
댓글은 블로그 운영에 큰 힘이 됩니다.

 

---

 

를 감싸고 있는 <div>태그의 클래스 값이

 

<div class="hello">

---

 

오늘은 블로그에 유튜브 영상을 반응형으로 올릴 수 있는 방법을 소개하겠습니다.

 

 

 

반응형이란?

 

'반응형'이라는 단어의 사전적 의미는 '유전자와 환경의 상호 작용에 따라 동일한 표현형을 나타내는 개체의 무리'입니다.

 

 

 

블로그의 스킨들 중에서 유튜브의 영상을 올렸을 때 영상이 작게 올라가는 스킨들이 있습니다.

위의 이미지와 같이 지금 이 블로그의 스킨인 북클럽 스킨도 그렇습니다.

딱 봐도 뭔가 답답해 보이죠.

스킨은 반응형 스킨인데, 왜 유튜브는 반응형으로 나오지 않는지 모르겠습니다.

 

 

 

티스토리의 또 다른 반응형 스킨인 #2 스킨입니다.

이 스킨 같은 경우에는 별도로 수정을 하지 않아도 처음부터 이렇게 유튜브의 영상이 반응형으로 올라갑니다.

딱 봐도 #2 스킨이 훨씬 보기에 좋습니다.

 

지금부터 북클럽 스킨의 이러한 현상을, 혹은 북클럽 스킨은 아니지만 어쨌든 유튜브 영상이 반응형으로 올라가지 않는 스킨들을 스킨 편집으로 영상이 프레임에 가득 차게 큰 화면으로 올리는 방법을 알아보겠습니다.

 

 

 

 

꾸미기 > 스킨 편집으로..

 

티스토리 블로그 html 편집 들어가는 법

티스토리 블로그의 스킨 편집을 어떻게 하는지 전혀 모르시는 분들은 아래부터의 설명을 봐도 무슨 말인지 모를 수도 있으니, 막히는 부분이 생기면 위의 글도 봐보시길 바랍니다.

 

 

 

jquery.fitvids.zip

0.00MB

먼저 위의 압축파일을 다운로드 받아서, 안에 들어있는 자바스크립트 파일을 압축해제 해주시길 바랍니다.

 

 

 

'블로그 관리'에서 꾸미기 > 스킨 편집 > html 편집 > 파일 업로드로 들어갑니다.

하단의 +추가 버튼을 클릭해서 jquery.fitvids.js 파일을 업로드합니다.

 

 

 

자동으로 images/ 의 하위로 업로드가 됩니다.

제대로 업로드가 되었는지 확인을 하고 html 편집으로 갑니다.

 

 

 

스크롤을 제일 하단으로 내려서 바디 태그가 끝나는 지점인 </body>를 찾아줍니다.

</body>의 바로 위에 이 소스 코드를 넣어줍니다.

 

 

 

<!-- 유튜브 반응형 --> <script src="./images/jquery.fitvids.js"></script> <script>$(".entry-content").fitVids();</script>

위의 소스 코드는 PC에서 드래그 후,
ctrl+x로 잘라내서 다른 곳으로 붙여넣기가 가능합니다.
ctrl+c(복사)는 불가능합니다.

 

 

 

참고로 여기서 중요한 점은, 이걸 따라 하시는 분의 블로그 스킨도 티스토리 북클럽 스킨이라면 그대로 붙여넣고 저장을 하시면 되지만, 다른 스킨이라면 ".entry-content" 부분을 수정해야 합니다.

 

 

 

 

소스 코드 내의 검색을 이용해서 를 찾습니다.

그러면 를 감싸고 있는 <div>태그가 있는데, 그 태그의 class 값을 넣어주시면 됩니다.

 

예를 들어, 본인의 스킨에는 를 감싸고 있는 <div>태그의 클래스 값이

 

<div class="hello">

</div>

 

이렇게 "hello"라고 되어있다면, 아까 위에서 복사했던 소스 코드도,

 

<!-- 유튜브 반응형 -->
<script src="./images/jquery.fitvids.js"></script>
<script>$(".hello").fitVids();</script>

 

라고 수정을 해주어야 합니다.

그리고 적용을 클릭하면 끝!

 

 

 

그리고 다시 확인하면 이렇게 블로그에 올린 유튜브 영상이 스킨의 크기에 딱 맞게 올라온 것을 확인할 수 있습니다.

 

 

 

 

 

 

첨부한 자바스크립트 파일의 소스 코드 출처

GitHub - davatron5000/FitVids.js: A lightweight, easy-to-use jQuery plugin for fluid width video embeds.

 

 

 

---

이 글이 도움이 됐다면 하단의 ♡ 공감 버튼을 꾹 눌러서
빨간 하트♥로 만들어주세요.
지인에게 보여주고 싶은 글이었다면
공감 버튼 옆을 클릭해서 SNS에 공유해주세요.
댓글은 블로그 운영에 큰 힘이 됩니다.

 

---

 

</div>

 

이렇게 "hello"라고 되어있다면, 아까 위에서 복사했던 소스 코드도,

 

<!-- 유튜브 반응형 -->
<script src="./images/jquery.fitvids.js"></script>
<script>$(".hello").fitVids();</script>

 

라고 수정을 해주어야 합니다.

그리고 적용을 클릭하면 끝!

 

 

 

그리고 다시 확인하면 이렇게 블로그에 올린 유튜브 영상이 스킨의 크기에 딱 맞게 올라온 것을 확인할 수 있습니다.

 

 

 

 

 

 

첨부한 자바스크립트 파일의 소스 코드 출처

GitHub - davatron5000/FitVids.js: A lightweight, easy-to-use jQuery plugin for fluid width video embeds.

 

 

 

---

이 글이 도움이 됐다면 하단의 ♡ 공감 버튼을 꾹 눌러서
빨간 하트♥로 만들어주세요.
지인에게 보여주고 싶은 글이었다면
공감 버튼 옆을 클릭해서 SNS에 공유해주세요.
댓글은 블로그 운영에 큰 힘이 됩니다.

 

---