유튜브 소스코드 복사시 iframe을 embed로 변경하는 방법

유튜브 소스코드 복사시 iframe을 embed로 변경하는 방법

안녕하세요~ 버블프라이스 입니다.

오늘은 "유튜브 소스코드 복사시 ifreame을 embed로 변경하는 방법"에 대해 알아볼까 합니다. YouTube 나 Vimeo 같은 동영상 사이트에서 영상을 공유시에 소스코드를 복사하면 기본적으로 아이프레임을 사용하게 되는데요~ 신규 사이트들은 쉽게 공유를 할 수가 있지만 오래된 사이트의 경우는 임베드 코드로 변환을 해줘야 정상적으로 화면에 출력이 되는 경우가 있습니다. 아래에서 보다 자세하게 알아보겠습니다.

"유튜브 소스코드 복사시 iframe을 embed로 변경하는 방법" 

아래는 3년 전에 작성했던 글인데요~ 본 내용과 함께 보시면 도움이 될 것 같습니다.

2015/12/28 - [IT관련/유튜브관련] - 유튜브영상 공유는 임베드코드로 간편하게

계속 내용이어서 YouTube 사이트에 접속 후 원하는 동영상을 링크 공유가 아닌 [소스 코드 복사]를 통한 공유를 원하신다면?

동영상이 멈춘 화면에서 마우스 우클릭을 하면 위와 같이 메뉴가 나오는데요~ [소스 코드 복사]를 클릭하면 아래와 같은 코드가 클립보드에 복사가 될 것입니다.

식별을 위해서 메모장, 텍스트 편집기 등을 열어서 위와 같이 붙여넣기를 해줍니다. (꼭 해줘야 하는 일은 아닙니다) 저는 이렇게 하는 것이 버릇이 되어서 메모장 등에 붙여넣기 하고 코드를 쭉 살펴봅니다.

이제 아이프레임 코드를 임베드 코드로 변환해주는 사이트를 한 곳 소개드릴까 하는데요~ 이름은 NuRi'S Tools 입니다. 하이퍼링크를 걸어놨으니 클릭을 하시면 바로 접속 할 수가 있습니다. 이 사이트에서 NuRi'S Tools 를 사용하는 방법으로는? 매우 간단합니다.

iframe 이라고 적혀있는 곳에 방금전에 메모장에 붙여넣기 했었던 iframe 코드를 붙여넣기 해줍니다. 그런다음 [Convert] 를 눌러줍니다. 

위 사진과 같은 결과물이 나올 것입니다. 영문과 숫자로 구성된 것이 보이는데요~ html을 자주 접하신분들은 왜 이렇게 되는지 이해가 가실 것 같고요, 처음 보시는 분들은? 위 사진에서 </embed>로 임베드가 끝나는 부분까지만 살려두시고 나머지 뒤에 꼬리 부분은 제거를 해주셔도 좋습니다. 이 뒤에 부분은 Nuri's Tools YouTube 변환기의 출처가 붙는 부분입니다. 출처를 남기고자 하시는분들은 수정작업 없이 사용을 해주셔도 좋을것 같습니다.^^

"유튜브 소스코드 복사시 iframe을 embed로 변경하는 방법"

일반적으로 N포털 사이트의 블로그에서는? 이전 글쓰기 모드에서 HTML 버튼을 클릭 후 임베드 코드로 변환한 소스코드를 본문에 붙여넣기를 한 다음 [Editor]를 클릭해주시면 아래와 같이 원본동영상의 썸네일이 보입니다.

위와 같이 출력이 됩니다. 그런데 동영상 아래 부분에 붙는 출처 (NuRi's Tools - YouTube 변환기)를 없애고 싶으시다면? 위에 제가 말씀드린 부분을 제외한 나머지 꼬리 부분을 삭제해주시고 동일한 방법으로 하시면 출처 부분이 붙지 않습니다.

일반적으로 N포털 사이트 블로그나 티스토리 블로그에서는 꼭 embed 코드로 변환을 하지 않아도 iframe으로도 html에서 읽어올 수가 있는데요~ 업데이트 등을 잘해주는 사이트는 이렇게 번거로운 작업을 하지 않아도 좋지만 구형 사이트를 이용시에는? 번거롭더라도 iframe to embed 로 변환을 해줘야 하는 곳들도 있습니다. 

DC갤러리는 구형 방법, 신규 방법 등 사용자가 원하는대로 할 수 있게 시스템이 잘 마련되어 있는데요~ 사용법은 위와 같이

1. HTML 을 체크한다

2. 임베디드 코드를 붙여넣는다.

3. </embed>까지 영역을 잡은 후 나머지 부분은 삭제한다.

4. 등록

이렇게 하셔도 되고요~ 이건 구형방법입니다.

더 간단하게 하고자 하신다면? 그냥 유튜브에서 [소스코드 복사]를 해서 위의 항목중에 YouTube를 선택 하신 후에 소스코드를 입력란에 붙여넣기를 하신 후에 적용을 누르시면 됩니다. 임베드 code로 변환작업을 하지 않아도 됩니다. 위 사진에 code를 넣는곳 밑 부분을 보시면 한글로 설명이 되어 있습니다. embed,object는 iframe은 불가능하다고 적혀있고, 상단 항목중 YouTube를 선택시에는? iframe 소스 코드는 embed 소스 코드로 자동 변환된다고 나와있습니다. 그냥 YouTube에서 소스코드를 복사후 여기에 붙여넣으신 후에 등록하시면 되겠습니다. 정말 간단하죠?

이렇게 해서 등록을 한 결과물 입니다. 1번이 임베드로 넣었고, 2번이 YouTube에서 소스코드를 복사후 [유 튜 브] 항목을 선택 후 아이프레임을 임베드로 변환작업 없이 붙여넣기 후 등록을 했을때 결과물 입니다. 

위 화면은 비메오 Vimeo 에서 동영상 공유하기를 누른 다음 임베딩 코드를 복사해보니 동일하게 아이프레임으로 되어있습니다.

N포털 사이트 블로그에 공유시에는? 위와 같이 동영상 사이트에서 소스코드를 복사후 [이전 버전으로 쓰기]를 클릭 후

위와 같이 글쓰기 모드가 나오면? [HTML] 을 클릭 후 붙여넣기를 합니다. 그런다음 [Editor]를 클릭 해주시면 아래와 같이 썸네일 이미지가 본문에 출력됩니다.

1번은 N포털 사이트의 블로그이고, 2번 이미지는 티스토리 블로그의 이미지 입니다. 지금까지 본문의 하는 방법은 동일합니다. 구형사이트에서 동영상 공유를 할때 아이프레임을 사용할 수 없는 경우에는 위와 같이 iframe to embed 변환을 한 후에 넣으셔야 합니다. 이상 오늘 내용 유익하셨나요? 언제나 많이 웃으시고 건강하세요- 글을 읽어주셔서 감사합니다.