IT

티스토리 반응형 스킨에서 YouTube, Vimeo도 자동으로 반응형 만들기

YouTube 공유 코드에는 width 와 height이 지정되어 있습니다. 너비와 높이의 값이 정해져 있기 때문에 반응형 웹 환경에서는 삽입된 유튜브 영상이 간혹 잘려 보이는 경우가 있습니다. 그렇다고 width값에 100%를 주고 height을 auto로 놓으면 높이 값이 제대로 반영이 안되는 경우가 생깁니다. 그래서 youtube와 같이 iframe 코드를 사용하는 공유코드를 반응형 웹에 맞게 삽입하기 위해서는 특별한 방법을 사용해야 합니다.

티스토리 반응형 스킨에서 YouTube, Vimeo도 자동으로 반응형 만들기

대표적으로 div로 감싸서 CSS값으로 설정하는 방법이 있습니다. 이 방법의 경우 모든 공유 코드 앞뒤로 div로 입혀줘야 하기 때문에 기존에 포스팅한 게시물의 경우 일일이 수정해줘야 하는 번거로움이 있습니다. 또 새로 삽입을 해야 할 때도 div 코드를 입력해주어야 하니 번거롭습니다. 지금 부터 제가 소개하는 방법은 동영상 제공업체에서 공개하는 공유코드 그대로 원 소스에는 아무런 수정 없이 jquery를 통한 자동 반응형 변경 방법입니다.

1. 다운로드 및 업로드

jquery.fitvids.zip
다운로드

위 파일을 다운로드 후, 압축을 해제하면 자바스크립트 파일이 나옵니다. 해당 파일을 티스토리 스킨 업르도 하는 곳에 업로드 합니다.

2. 코드 붙여넣기

그리고 아래 보이는 코드를 skin.html의 </body> 위에 복사해서 붙여 넣기 합니다.

// Basic FitVids
<script src="./images/jquery.fitvids.js"></script>
<script>$(".entry-content").fitVids();</script>
</body>

위 코드는 티스토리에서 공식 제공하는 반응형 스킨 북클럽의 경우를 기준으로 설명을 하였습니다. 괄호 안의 .area_viewentry-content는 본문 치환자인 [##_article_rep_desc_##]을 감싸는 div의 class 값입니다. 스킨에 따라 이 부분은 다를 수 있으니 해당 스킨에 맞에 수정해 주어야 합니다.

<div class="entry-content">
	[##_article_rep_desc_##]
</div>

위 코드까지 붙여 넣었다면, 모든 설정은 완료 됐습니다. 기존에 삽입했던 유튜브 영상을 한 번 확인 해 보세요. 크기가 제각각 이었던 영상이 본문 크기에 딱 맞게 변경 됐을 겁니다. 반응형이기 때문에 접속 하는 기기의 크기에 맞춰 자동으로 가로사이즈에 맞춰서 나올거예요

3. 위 코드를 적용하면 어떻게 달라지나?

위 이미지는 코드 적용 전후 결과를 비교 해 보았습니다. 적용 전에는 크기를 지정한 그대로 화면에 노출 되는 것을 확인 할 수 있습니다. 하지만 코드를 적용후에는 유트브 첨부 영상이 화면에 맞게 배치되었습니다. 기존에 포스팅 했던 내용도 모두 자동으로 기기에 맞게 변경되어 보여집니다. 추 후에 동영상을 삽입할 때도 공유 코드 변경을 신경 쓸 필요 없이 유튜브나 비메오에서 제공하는 공유소스를 그대로 삽입하시면 됩니다.

혹시 설정에 오류가 있거나 문제 발생시 댓글로 문의 주시면 해결 방안을 찾아 보도록 하겠습니다.

내용출처

https://github.com/davatron5000/FitVids.js/find/master

Related Posts

티스토리 탈출 다양한 CMS(Content Management System) 종류 모음

카카오가 정말 실책을 해도 큰 실책을 했다.실책으로 봐야하는지도 의문이다. 황금알을 낳는 거위의 배를 갈랐으니 말이다. 자사 블로그 플랫폼인 다음 블로그를 없애고 티스토리로 통합하더니 수익형 블로그를 운영하는 티스토리에 강제로…

Intel CPU 보증기간 워런티 조회 방법

인텔 CPU는 고장이 나지 않는 걸로 정평이 나 있다. 오죽하면 국내에서 운영하던 통합 AS 센터가 고칠 CPU가 없다고 문을 닫았을까. 그럼에도 혹여나 있을 고장에 대비해 미리 보증기간을 알아…

ASUS 메인보드 바이오스 업데이트 방법 EZ 플래시 업데이트 (Prime H310M-A R2.0)

OS든, 시스템이든, 소프트웨어든 최신 업데이트가 있으면 즉각즉각 하는 편이다. 보안상의 문제점이 해결되고 뭔가 알지 못했던 문제점들이 고쳐진다는 믿음 때문이다. 메인보드 바이오스 같은 경우 업데이트가 자주 있지는 않다. 일년에…

컴퓨터 조립 메인보드 F_PANEL 프런트패널 케이블 연결 방법

컴퓨터 조립이 쉬운 듯하면서 은근히 까다롭다. 특히 선정리가 그렇다. 선정리에 익숙하지 않은 탓에 이 고생을 왜 하고 있지란 생각이 들 때도 있다. 그럼에도 직접 해냈다는 성취감으로 직접 조립을…

윈도우 설치시 “새 파티션을 만들거나 기존 파티션을 찾을 수 없습니다. 자세한 내용은 설치 로그 파일을 참조하세요.” 오류 해결 방법

최근 시스템을 업그레이드 하면서 SSD를 포맷을 하여 싹 밀어버리고 윈도우를 재설치하는 이른바 윈도우 클린 설치를 했다. 포맷하는 과정이 잘못됐는지 윈도우 설치 도중에 윈도우 설치 위치를 지정하는 단계에서 “새…

카카오톡 오픈채팅방 대화내용 저장 백업 방법

카카오톡은 기본으로 제공해야 할 기능인 백업 기능을 톡서랍이라는 이름으로 돈을 받고 즉 유료과금 형태로 서비스를 제공하고 있다. 그마저도 백업 기능이 완벽하지 않다. 카카오톡 오픈채팅방의 대화 내용은 톡서랍을 통해서…

This Post Has 9 Comments

  1. 요즘 맥에서 유튜브 링크가 제대로 안되서 고민이었는데 이 방법도 한번 시도 해봐야겠네요.
    즐거운 명절 되시고
    새해 복 많이 받으세요. ^_^

  2. 방법은 좀 다르지만 제 블로그에 이미 있는 소스코드인 듯 하네요 ㅎㅎ 저도 저거 구현하느라 한동안 고생했죠 ^^;

    1. 먼저 제 블로그를 찾아 주셔서 감사합니다.
      jquery를 이용한 방법이 워낙 다양하니까요. 제가 이용한 방법이 좀 더 보편적으로 적용되지 않을까 생각해봅니다. 책덕후 화영님의 관련 포스팅을 읽어보니 iframe을 앞뒤로

      로 감싸줘야 하는 것 같던데 제가 포스팅한 방법은 다른 구분자로 감쌀 필요 없이 유트브에서 제공하는 소스 그대로 붙여 넣기만 하면 적용이 되거든요.

  3. 파일 업로드 까지는 알겠는데 나머지 소스코드 이런 부분은 너무 어렵네요 무슨 말인지 ㅠㅠ

  4. 2개의 내용이 섞인거 같습니다.

    아래에

    [##_article_rep_desc_##]

    집어넣으라는 거 까지는 알겠습니다.
    그런데

    [##_article_rep_desc_##]

    이건 어디에 넣어야 하나요?

    1. 저의 글의 오해의 소지가 있나보네요.

      윗 부분만 넣으시면 되구요

      아래에 있는 코드는 참고용입니다.
      본문 치환자를 감싸고 있는

      의 Class 값을 보여주기 위한 참고용입니다.
  5. 감사합니다 “area_view” 해당 스킨에 맞게 수정하라는 소리는 무슨 뜻인가요? 숫자로 바꾸는 건가요?

답글 남기기

이메일 주소는 공개되지 않습니다. 필수 필드는 *로 표시됩니다