에어뷰 AIRVIEW

워드프레스에 유튜브 동영상 넣는 방법(퍼오기)

워드프레스에 유튜브 동영상 넣는 방법(퍼오기)


오늘은 워드프레스에 유튜브 동영상을 넣는 방법을 알려드리겠습니다.


티스토리에 적용하는 방식과는 좀 다른데요,

당연히 될 줄 알았는데 안 되는 기능이어서.. 좀 당황했습니다.

근데 사실 문제가 되는 부분은 크게 중요한 부분은 아닙니다.

해당 부분은 이후에 방법을 알게 되면 업데이트 하도록 하겠습니다.


유튜브에서 "퍼오기" 기능 사용

워드프레스에 유튜브 동영상 넣는 방법(퍼오기)

먼저 워드프레스에 공유하고 싶은 동영상을 유튜브에서 들어갑니다.


워드프레스에 유튜브 동영상 넣는 방법(퍼오기)

퍼가기 를 눌러줍니다.


워드프레스에 유튜브 동영상 넣는 방법(퍼오기)

복사 를 눌러서 해당 소스를 복사합니다.


워드프레스에 유튜브 동영상 넣는 방법(퍼오기)

정상적으로 복사가 되면, 왼쪽 맨 아래에 복사했다는 문구가 나오고,

코드가 드래그가 됩니다.


워드프레스 글쓰기에 소스(코드) 넣기

워드프레스에 유튜브 동영상 넣는 방법(퍼오기)

준비는 다 되었습니다.

워드프레스 글쓰기에 접속합니다.

어떤 글쓰기 방식을 사용하느냐에 따라 메뉴의 차이는 있을 수 있습니다.

저는 구버전 글쓰기 플러그인을 사용하지만, Elementer나 Mong9등 다른 것을 사용하더라도

기본적으로 있는 내용이니 쉽습니다.


먼저 보고 있는 Visual 부분은 미리보기와 같이 보이는 부분이고,

옆에 있는 Text다른 플랫폼에서는 Html 이나 CSS 로 표현될 수 있습니다.

해당 부분에는 코드 정보가 담겨 있습니다.


워드프레스에 유튜브 동영상 넣는 방법(퍼오기)

예시로 아무렇게나 입력한 상태로 Text 에 들어가서 코드를 보면,

  가 몇 줄 있는데, 엔터를 쳐서 빈줄을 만들었을 때 발생하는 코드입니다.


워드프레스에 유튜브 동영상 넣는 방법(퍼오기)

원하는 부분에 복사되었던 코드를 붙여넣기(Ctrl+V) 해줍니다.


워드프레스에 유튜브 동영상 넣는 방법(퍼오기)

다시 Visual 로 가 보면, 유튜브 영상이 불러와 진 것을 볼 수 있습니다.


워드프레스에 유튜브 동영상 넣는 방법(퍼오기)

오른쪽에 발행(Publish) 위에 있는 미리보기(Preview)를 눌러서 

글쓰기를 완료했을 때 적용되는 글을 확인하면,


워드프레스에 유튜브 동영상 넣는 방법(퍼오기)

영상이 공유가 되기는 하는데.. 영상의 가로 폭이 코드와 차이가 있었습니다.


워드프레스에 유튜브 동영상 넣는 방법(퍼오기)

제 블로그의 글쓰기 폭은 860px 이고, 불러오는 영상의 가로폭(width)는 560px 인데..

공유되는 영상의 폭이 860px을 꽉 채우고 있었습니다.


워드프레스에 유튜브 동영상 넣는 방법(퍼오기)

특정 px로 공유하고자 하는 영상의 크기를 지정했을 때, 

핸드폰이나 태블릿과 같이 PC보다 화면이 작은 기기로 볼 때 

기기의 가로폭보다 지정된 폭(width)이 크면 문제가 발생합니다.


따라서 티스토리에 영상을 넣을 때는 보통 위와 같이 width="100%"로 비율로 설정해서

어느 가로폭에도 딱 맞게 들어갈 수 있게 지정을 하는데요,


워드프레스에도 적용을 해 보았습니다..


워드프레스, width=100% 오류 발생

워드프레스에 유튜브 동영상 넣는 방법(퍼오기)

결과는, Text 에서 코드를 100%로 바꾸고 Visual로 와서 봐도 이전과 크기가 다릅니다.


워드프레스에 유튜브 동영상 넣는 방법(퍼오기)

또한 프리뷰를 해도 화면 전체를 넘는 길이로 영상이 아주 길고 크게 삽입이 됩니다.


제가 코딩을 자세히 알지는 못하기도 하고, 

그냥 그대로 붙여넣으면 적절한 크기로 유튜브 영상을 넣을 수 있기 때문에 

더 자세히 알아보지는 않았습니다.


이후에 왜 그런지 방법을 알게되면 추가 포스팅하도록 하겠습니다.


끝.

이 글을 공유합시다

facebook twitter googleplus kakaoTalk kakaostory naver band

본문과 관련 있는 내용으로 댓글을 남겨주시면 감사하겠습니다.

비밀글모드