유튜브 소스코드 복사시 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 변환을 한 후에 넣으셔야 합니다. 이상 오늘 내용 유익하셨나요? 언제나 많이 웃으시고 건강하세요- 글을 읽어주셔서 감사합니다.

이 글을 공유하기

댓글(84)

  • 이전 댓글 더보기
  • 2018.11.05 11:03 신고

    와~ 간단히 바꿀 수 있군요. 오늘도 좋은 정보 알려주셨네요. 편안한 한 주 되세요. ^^

  • 2018.11.05 11:05 신고

    좋은정보 잘보고 갑니다 ^^
    즐거운 한주 보내세요!

  • 2018.11.05 15:04 신고

    으흠~ 이렇게 임베드 코드가 쓰일일이 있군요.
    세삼 놀라운 일인것 같습니다.
    물론 저는 인사이드를 사용하지 않으니 그런걸수도 있겠지만요. ㅎㅎ

    • 2018.11.05 17:29 신고

      설근악님 방문해주셔서 감사합니다^^
      요즘 대부분의 사이트들은 임베드로 변환을 하지 않아도 아이프레임으로 그냥 읽어지지만 구형 사이트의 경우는 임베드로 해야하는 경우가 있습니다.

  • 2018.11.05 15:04 신고

    직접 수정하는게 아니군요.
    이렇게 자동으로 변환 시켜주는 사이트까지..
    생각도 못해봤네요. ^^;

    • 2018.11.05 17:29 신고

      그쵸? 예전에는 일일히 변환을 했었는데요 ㅎㅎ
      그냥 아이프레임 주소를 넣고 변환하기 누르면 알아서 해주더라고요 ㅋㅋㅋ

  • 2018.11.05 15:16 신고

    유익한 정보입니다.
    잘 활용해 보겠습니다 ^^

  • 2018.11.05 15:55 신고

    오늘도 유용한 정보 잘 보고 갑니다!
    즐거운 하루 보내세요 : )

  • 2018.11.05 17:45 신고

    이런게 정말 유용한 팁이죠.^^
    즐거운 한 주 되시길 바랍니다.~

  • 2018.11.05 18:42 신고

    하나씩 꼼꼼하게 잘알려주셔서 금방할수있을거같아요^^!

  • 2018.11.05 19:17 신고

    iframe 코드를 embed 코드로 이렇게 쉽게 바꿀수 있는 정보가 있었네요.
    오늘도 좋은 정보 잘 보고 갑니다. 즐거운 하루 되세요.

  • 2018.11.05 19:30 신고

    설명을 잘해주셔서 초보도 따라하겠네요 ㅎ 잘보고갑니다요

  • 2018.11.05 20:39 신고

    티스토리는 소스코드 복사만으로도 동영상이 잘 재생되어 편합니다.
    행복하세요^^

  • 2018.11.05 21:56 신고

    유튜브 동영상 가져오는걸 변환해야 하는 경우도 있군요.
    잘 배우고 갑니다.

    • 2018.11.05 22:01 신고

      넵. 예전에 만들어진 홈페이지 등에서는 번거롭지만 임베드 코드로 넣어야 되더라고요^^ 좋은 한 주 보내시길 바래요

  • 2018.11.06 00:25 신고

    매번 이렇게 쉽게 설명해주시니 좋은 정보나라인 것 같아요 ^^ 항상 감사합니다

  • 2018.11.06 00:27 신고

    예전에 정말 찾았었는데 이제서야 발견했네요 ㅠㅠ

    • 2018.11.06 00:29 신고

      ㅎㅎㅎ 그쵸? 저는 일일히 수작업으로 변환해서 올렸었던 기억이ㅜ있습니다. 이 사이트는 그냥 붙여넣기하면 알아서 변환이 되더라고요

  • 2018.11.06 01:15 신고

    오래된 사이트라면 embed 변환이 필요할 수도 있군요.
    간단하게 바꿀 수 있어 좋네요.
    멋진 정보에요. ^^

    • 2018.11.06 01:16 신고

      넵, 요즘은 임베드 코드로 변환을 하지 않아도 쉽게 공유할 수 있게 해놧더라고요^^
      희망찬 한 주 보내시길 바래요-

  • 2018.11.06 09:57 신고

    iframe이 사용안되는 사이트에서 사용 하면 딱이겠내요~!!
    역시 버블프라이스님~!!
    알고 있다 보면 정말 유용하게 사용할 수 있겠어요~!!

    • 2018.11.06 16:27 신고

      언제나 좋은 댓글로 맞아주셔서 감사합니다 ^^
      스트레스 없는 좋은날 보내시길 바래요 가래라컴퍼니님

  • 2018.11.06 16:51 신고

    ㅎㅎ 참고하겠습니다~

  • 2018.11.06 19:22 신고

    유용한 정보네요~
    잘 보고 갑니다~~~

  • 2018.11.07 23:42 신고

    이 글을 보고 따라 하면 쉽게 활용할 수 있겠습니다.~

  • 아인
    2018.12.05 18:04

    필요한정보였는데 감사합니다!
    근데 알려주신 nuri's tool 변환하기를 눌러도 주소가 뜨지 않는데 왜그러는걸까요

Designed by JB FACTORY