반응형 블로그에 반응형 유튜브 올리는 방법!!

Reviews & Design & Swim
About me /Contect/Admin

TISTORY/티스토리 정보

네이버의 검색로봇이 말하길 그러니까 네이버 인공지능(AI) 기술이 현 블로그를 자동으로 분석한 결과 웹 표준을 준수하는 상위 1% 사이트로 인정해 주었다. 한마디로 대한민국 1%! (렉스톤 생각난다.) 그 인정의 정확도가 몇 퍼센트 인지는 모르지만, 네이버 검색로봇(인공지능?!)이 그렇게 말했으니, 믿어야지 아마 믿고 싶은 마음이 크달까?! : )


상위 1%내가 바로 대한민국 1%!! 하지만 콘텐츠는 99% ㅋㅋ

웹 표준을 준수하는 상위 1% 사이트가 된 이유를 생각해 보면 블로그를 반응형으로 코딩이 큰 몫을 했다고 본다. 기존 블로그는 PC 전용 블로그 였는데 몇 년 전에 반응형 작업을 해놓았다. 그 덕을 지금 보고 있다. 



몇 년 전 부터 블로그보다는 유튜브가 대세(수익 창출에 관해서 그만큼 좋은 콘텐츠가 유튜브에 많다.)가 된 만큼 블로그에도 유튜브 영상을 올리는 경우가 많다. 나조차 매일매일 MOXF8 연습 (도레미...)영상을 올리니까 말이다.  하지만 그 영상을 블로그에 올릴때 주의 사항이 있다. 


유튜브 공유에서의 해당 소스는 반응형을 지원하지 않는다. 그럼 어떻게 되느냐?! 반응형 사이즈를 넘어서 버린다. 아래 블로그 처럼 말이다.  

반응형 유튜브유튜브의 공유 소스는 사이즈가 일정하게 정해져 있다.

이미지와 같이 유튜브 영상이 짤려 보이는 경우가 발생한다. 최악의 경우 PLAY 버튼 조차 보이지 않을 때도 있다.  열심히 올려 놓았는데, 보여지지 않는다면 얼마나 아쉽겠는가? 그래서 반응형 블로그에는 반응형 유튜브를 올려야 된다.


유투브 반응형이렇게 정확하게 나와야 한다.

이미지 처럼 정확하게 반응형에 맞춰져 나와야 한다.  방법은 여러가지가 있는데, 자바스크립트를 이용해서 하는 방법가 직접 코드 수정하는 방법이 있다. 자바스크립트의 장점은 한 번만 적용하면 된다는 것 지금 까지 많은 유튜브 영상을 올렸다면, 자바스크립트로 변경하는 것을 추천한다. 


일일이 변경하는 막노동에서 해방이 되니까. 하지만 몇 개가 없다면 자바스크립트는 그리 추천하지 않는다. 일단 코드 수정 등 일반인들이 하기 어려울 수 있고 만약 한다고 했을 시, 잘못 입력 했을 때 감당하기가 쉽지 않을 것 같아서다. 그리고 자바스크립트에 쓸데 없는 코드들이 많을 경우 사이트가 느려지며, 아무래도 로봇들에게 좋은 평가를 받지 못할 가능성이 높다. (블랙 코드가 있을 수도 있다.)


그래서 오늘 소개하는 방식은 코드 수정 없이 유튜브(YOUTUBE) 주소만 넣으면 반응형으로 만들어주는 사이트를 소개하려 한다. 


http://embedresponsively.com/

반응형으로 만들어 주는 사이트인데 아주 심플하다. 

반응형 유튜브 주소만 넣고 EMBED 버튼 클릭 / 끝!!

Vimeo(비메오)도 가능한데, 유튜브의 기술발전으로 비메오만의 특징이 많이 희석된 느낌이라 유튜브를 거의 사용한다고 보면 된다.  유튜브는 굳이 클릭을 하지 않아도 기본 설정으로 되어있다. 


EMBED 클릭 후 아래 EMBED code: 를 복사해서 블로그의 포스트에 붙여넣으면 된다. 그래도 모르니 (당신이 네이버를 쓰는지 티스토리를 쓰는지에 따라) HTML 모드로 들어가서 하시길~ 이것으로 반응형 유튜브 올리는 법 끝! 그럼 오늘도 즐거운 포스트!!



연관있는 콘텐츠