워드프레스에 네이버 TV 동영상 삽입하기

0

네이버 TV 동영상을 워드프레스 사이트에 삽입하고 싶은 경우가 있을 수 있습니다. 이 경우 네이버 TV 동영상의 iframe 형태의 공유 코드를 워드프레스에 삽입하면 됩니다.

먼저 공유할 네이버 TV 동영상 페이지에서 공유 아이콘을 누르고 iframe 코드를 복사하도록 합니다. 테스트로 ‘근위병’의 3라운드 무대 – 손대지 마 동영상을 공유해보겠습니다.

네이버 TV 동영상 공유하기

이와 같은 화면에서 공유 아이콘을 누르면 다양한 공유 방식이 표시됩니다. 맨 아래의 코드 부분(<iframe scr…)의 “복사”를 클릭하여 코드를 복사합니다. 복사한 코드는 다음과 비슷한 형식이 됩니다.

<iframe src='http://serviceapi.rmcnmv.naver.com/flash/outKeyPlayer.nhn?vid=ADDEC17B692FEEB0298367F2F9897408C13F&outKey=V1252b76283517e2f125756c6a3282113cd281f72b8e6184e905d56c6a3282113cd28&controlBarMovable=true&jsCallable=true&isAutoPlay=true&skinName=tvcast_white' frameborder='no' scrolling='no' marginwidth='0' marginheight='0' WIDTH='544' HEIGHT='306' allow='autoplay' allowfullscreen></iframe>

이 코드를 삽입하고자 하는 페이지나 글의 편집 화면에서 텍스트 모드로 전환한 후에 원하는 위치에 코드를 삽입합니다.

워드프레스 텍스트 모드

하지만 사이트에 SSL 보안서버 인증서가 설치된 경우 동영상이 제대로 표시되지 않습니다. SSL 인증서가 설치되어 사이트가 https로 로드되는 경우 네이버 공유 URL의 http:// 부분을 https://로 변경하면 동영상이 제대로 표시됩니다.

참고로 구글이 블로그를 통해 크롬 68이 릴리스되는 오는 7월부터 SSL 보안 서버가 적용된 HTTPS 웹페이지는 ‘안전함’으로 표시하고 그렇지 않은 HTTP 사이트에 대해서는 ‘안전하지 않음’ 경고를 표시한다고 합니다(“구글 크롬, 7월부터 모든 HTTP 사이트에 대해 ‘안전하지 않음’ 경고 표시” 참고).

위의 코드를 삽입해보면 다음과 같이 동영상이 잘 표시됩니다.

숏코드로 네이버 동영상 삽입하기

네이버 동영상을 자주 삽입해야 하는 경우 텍스트 모드에서 코드를 삽입하는 것이 번거로울 수 있습니다. 이 경우 숏코드를 만들어 비주얼 모드에서 직접 원하는 곳에 코드를 추가할 수 있습니다.

다음 코드를 사용 중인 워드프레스 테마의 함수 파일에 추가하도록 합니다.

// 네이버 동영상 표시 숏코드
function vid_sc($atts, $content=null) {
extract(
shortcode_atts(array(
'vid' => ''
), $atts)
);
return '<iframe src="http://serviceapi.rmcnmv.naver.com/flash/outKeyPlayer.nhn?vid=' . $vid . '&controlBarMovable=true&jsCallable=true&isAutoPlay=true&skinName=tvcast_white" frameborder="no" scrolling="no" marginwidth="0" marginheight="0" WIDTH="544" HEIGHT="306" allow="autoplay" allowfullscreen></iframe>';

}
add_shortcode('navertv', 'vid_sc');

SSL 인증서가 설치된 경우 http://를 https://로 수정하도록 합니다.

이 작업을 하기 전에 먼저 자식 테마를 만들도록 합니다. 자식 테마를 만들지 않고 이 코드를 삽입하면, 추후에 테마가 업데이트되는 경우 코드가 사라지게 됩니다. 자식 테마를 만드는 작업이 번거로우면 플러그인을 하나 설치하여 간단히 만들 수 있습니다(참고).

이제 다음과 같은 형식으로 코드를 삽입할 수 있습니다.

[navertv vid="ADDEC17B692FEEB0298367F2F9897408C13F&outKey=V1252b76283517e2f125756c6a3282113cd281f72b8e6184e905d56c6a3282113cd28"]

vid에 들어갈 코드는 vid= 다음부터 &controlBarMovable= 이전까지의 코드입니다.

참고:

*일부 글에 제휴링크가 포함될 수 있습니다.기부를 통해 블로그 운영을 후원하실 수 있습니다.

Related Posts

댓글 남기기