상세 컨텐츠

본문 제목

티스토리 유튜브 동영상 간단하게 반응형으로 넣기

디자인

by ˘◡˘ 2021. 8. 27. 17:35

본문

티스토리나 구글 블로거, 워드프레스 등 CMS 나 웹페이지에 html 을 직접 삽입할 수 있다면, 간단하게 유튜브 동영상을 반응형으로 코드를 생성할 수 있습니다. 반응형 라이브러리인 부트스트랩이나 파운데이션, CSS 프레임워크를 스킨에 사용한다면 기본 지원하는 동영상 등 반응형 embding 코드를 사용하면 되는데요. 티스토리 기본 제공 반응형 스킨이나 판매용 스킨들도 코드를 기본으로 지원하는 경우가 많지는 않습니다.

Embed Responsively 이구요. 말그대로 반응형으로 삽입하다! 이구요. 유튜브 동영상의 경로 붙혀넣기 만으로 반응형 html 코드를 생성할 수 있습니다.

Embed Responsively 바로가기: http://embedresponsively.com/

먼저, 페이지 접속하면 간단하게 주소를 입력할 수 있는 텍스트박스Embed 확인 버튼만 있습니다.

YouTube Page URL 의 텍스트 박스에 원하는 유튜브 경로를 입력하신 후, Embed 버튼을 클릭합니다.

▲ Embed 버튼을 클릭하시면, 미리보기 화면과 함께 Embed code 가 생성되는데요. 아래의 코드를 원하시는 곳에 붙혀넣기 하시면 바로 사용이 가능합니다. 코드는 CSS 와 HTML 코드를 생성해 주는데요. 만약 자주 사용하신다면 <style>~</style> 의 안에 내용을 기본 티스토리 등 기본 css 파일에 붙혀넣기 하시고, <div>~<div>로 시작하는 부분을 서식에 입력 해 놓으시면, 매번 사이트 방문해서 생성하지 않아도, 유튜브 주소만 변경만으로 쉽게 작성하실 수 있겠습니다.

샘플영상은 귀여운 쌍둥이 유튜브채널인 뚜아뚜지TV 의 최신영상이구요.

위의 영상처럼 활용해 보실 수 있습니다.

참고로 부트스트랩 사용하신다면, 아래 코드로 좀 더 편리하게 반응형 동영상을 활용하실 수 있습니다.

<!-- 21:9 aspect ratio -->

<div class="embed-responsive embed-responsive-21by9">

    <iframe class="embed-responsive-item" src="..."></iframe>

</div>

<!-- 16:9 aspect ratio -->

<div class="embed-responsive embed-responsive-16by9"><iframe class="embed-responsive-item" src="..."></iframe>

</div>

<!-- 4:3 aspect ratio -->

<div class="embed-responsive embed-responsive-4by3">

    <iframe class="embed-responsive-item" src="..."></iframe>

</div>

<!-- 1:1 aspect ratio -->

<div class="embed-responsive embed-responsive-1by1">

    <iframe class="embed-responsive-item" src="..."></iframe>

</div>

21:9 와 1:1 비율의 임베딩코드는 코드는 부트스트랩3 버전 이하에서는 적용되지 않고, 부트스트랩 4에 새로 추가된 기능입니다.

유튜브 동영상 반응형으로 만드는 방법에 대해서 알아보았는데요. 상단 웹사이트 선택 메뉴 보시면, 유튜브는 물론, 비메오, 구글맵, 게티이미지 등도 활용하실 수 있구요. 더보기에 Scribd, 사운드클라우드, 트위터 등은 기본 반응형 임베딩 코드를 지원한다고 공지되어있습니다.

가끔 동영상 티스토리 등에 깨지거나 반응형 안되어, 삽입할 때 불편하셨다면 활용하시면 좋을 것 같습니다. 감사합니다.

▼ 참고할 만한 정보

[생활정보] - 스마트폰 토렌트 다운로드 어플 Flud
 

스마트폰 토렌트 다운로드 어플 Flud

가끔 BitTorrent 파일 다운로드 할 경우가 있습니다. Flud 간단하게 사용할 수 있는 어플인데요. 광고가 포함된 무료와 유료인 ad-free 버전 2가지가 있습니다. 무료버전도 하단 광고만 존재해서 크게

virz.net

[생활정보] - 크롬, 웨일 브라우저 확장 프로그램 단축키 설정 방법.tip
 

크롬, 웨일 브라우저 확장 프로그램 단축키 설정 방법.tip

크롬, 웨일 브라우저의 확장 프로그램(익스텐션/확장앱)에 단축키를 설정할 수 있습니다. 크롬이나 웨일, 파이어폭스 등의 브라우저들은 확장 프로그램 기능을 통해 더 편리하게 또, 더 많은 기

virz.net

[생활정보] - MZK 다운로드 악성코드제거 프로그램 사용법
 

MZK 다운로드 악성코드제거 프로그램 사용법

mzk 는 Malware Zero Kit 의 약자로 보조 악성코드 제거 스크립트 입니다. 네이버 대표 보안 카페인 바이러스 제로 시즌 2에서 제작 및 배포하는 프로그램 입니다. 윈도우 운영체제에서 사용할 수 있구

virz.net

관련글 더보기

댓글 영역

  • 프로필 사진
    2018.07.29 14:21 신고
    반응형이라 어떤 브라우저나 기기에서도 동영상이 깔끔하게 잘 박혀 나오겠네요.
    • 프로필 사진
      2018.07.30 09:24 신고
      티스토리 등 반응형 스킨에서도 일반 스킨도 html 소스 붙혀넣기만 하면 되서 편리합니다^^ 즐거운 한주 시작하세요~
  • 프로필 사진
    2018.07.30 02:21 신고
    티스토리 반응형 스킨 이용하시는 분들에게는 유용한 팁이겠네요. ^^
    • 프로필 사진
      2018.07.30 09:24 신고
      일반 스킨 사용하셔도 크기 100% 로 유튜브 보여지니 사용하셔도 좋습니다^^ 즐거운 한주 시작하세요~
  • 프로필 사진
    2018.07.30 08:52 신고
    요즘은 유튜브가 대세라서 알아두면 좋을것 같습니다
    • 프로필 사진
      2018.07.30 09:26 신고
      저도 가끔 블로그에 붙혀서 쓰려구요~ 예전에 부트스트랩 직접 수정해서 사용해서 아래코드만 필요했었는데, 스킨 변경 후 필요해서 찾아봤습니다^^ 댓글 감사합니다. 날씨 덥지만, 기분 좋은 한 주 시작하세요!
  • 프로필 사진
    2018.07.30 10:24 신고
    오오 가끔 블로그에 유튜브 동영상 넣을 일이 생기는데 유용하게 쓸 수 있겠네요! 감사합니다 :)
    • 프로필 사진
      2018.07.30 10:31 신고
      저도 가끔 사용하지만, 꽉 찬 화면으로 보여줄 수 있어서 좋습니다^^ 로사씨님, 즐거운 한 주 시작하세요!
  • 프로필 사진
    2020.01.20 14:19
    관리자의 승인을 기다리고 있는 댓글입니다
  • 프로필 사진
    2021.03.12 23:06
    뭐하나여쭤볼게요ㅠㅠ
    코드를 만들었는데 유튜브 어디에다가 붙여넣으면되는건지를모르겠습니다.
    기존 퍼가기를 했던곳 내용을 다지우고 나온코드를 전체 복붙해도안됩니다..ㅠㅠ
    • 프로필 사진
      2021.03.15 14:44 신고
      글쓰기 화면 이 바뀌어서 그런 듯 하구요. 입력 화면 오른쪽에 [기본모드] 클릭해 보시면, Html 이라고 있습니다. 이 탭으로 변경해서 원하시는 곳에 코드 입력해 보시면 될 것 같아요~