유튜브 "영상 반응형으로 올리는 방법"

유튜브 "영상 반응형으로 올리는 방법"

유튜브 "영상 반응형으로 올리는 방법" 요즘에는 온라인 홈페이지나 블로그에 영상을 쉽게 첨부할 수 있습니다. 유튜브, 네이버, 카카오 등에서 영상 서비스를 제공하고 있어서, 여기에 올려놓은 영상을 “코드”만 삽입하면 내 블로그나 홈페이지에서 볼 수 있도록 올릴 수 있답니다. 그래서 단순히 글과 사진만으로 “글”을 쓸 필요는 없게 되었습니다. 글, 사진, 영상, 플래시 등 다양한 미디오를 한 곳에 조합할 수 있게 되었으니 상황에 맞게 적절히 잘 조합한다면, 재미있는 콘텐츠를 만들어 낼 수 있는 것이지요. “일반적인 영상 첨부의 경우” 이렇게, 일반적인 영상 첨부의 경우에는 대부분의 영상 제공 사이트, “유튜브, 네이버, 다음(카카오)” 등에서 바로 “퍼가기” 기능을 제공합니다. 그래서, 퍼가기 기능에서 나오는 코드를 복사해서 내가 붙여놓고자 하는 곳에 “붙여 넣기”를 하면 영상을 가져올 수 있습니다. 이렇게 기본적으로 영상을 가져오는 방법은 간단한데요. 하지만, 이 방법으로 영상을 가져오게 되면, 영상 크기를 “고정”해서 가져오게 되는 경우가 대부분입니다. 예를 들어서, “600 X 480”으로 영상을 가져오게 되면, 어떤 환경에서 보아도 화면 사이즈가 “600 X 480”으로 고정이 되게 되지요. 큰 화면에서 보아도 같은 사이즈, 휴대폰과 같은 작은 사이즈에서 보아도 같은 화면 크기로 보입니다. “큰 비율로 첨부된 영상을 휴대폰에서 볼 경우” 이렇게 어느 화면에서 보아도 차라리 같은 비율과 같은 사이즈로 나온다면 괜찮을 텐데, 아쉽게도, 위의 경우 “600 X 480”을 예로 들면, 가로 크기가 600보다 작은 기기에서 보게 되면, 예를 들어서 “300”짜리의 휴대폰에서 본다고 가정을 해본다면, 600 X 480”으로 나오는 것이 아니라, “300 X 480”과 같이 비율이 꺠져서 나오게 됩니다. 그래서, 이렇게 화면이 작은 기기로 영상을 보게 되면, 원하는 영상을 제대로 볼 수가 없는 현상이 발생합니다. “반응형으로 코드를 삽입하면, 이 문제를 해결하고 있다.” 이러한 문제는 사실, 모바일이라는 기기가 등장하면서 생긴 문제인데요. 요즘에는 이러한 문제의 해결책으로 “반응형”으로 코드를 짜서, 홈페이지나 블로그를 구축하는 경우가 많아지고 있습니다. 그래서 마찬가지로 이런 문제도 “반응형 코드”로 영상을 가져가는 것으로 해결할 수 있답니다. “EMBED 코드를 “반응형 박스” 안에 넣어주면 문제를 해결할 수 있다.” 그래서, 이러한 문제를 해결하는 가장 쉬운 방법으로는 반응형으로 일정한 비율을 유지하는 가상의 박스를 만들어주는 것으로 해결할 수 있습니다. 하지만, 이렇게 코드를 직접 짜라고 하면, 전공자나 전문가가 아니고서는 쉽지 않을 텐데요. 그래서, 이것을 쉽게 해주는 사이트가 있습니다. 바로 “EMBEDRESPONSIVELY.COM”이라는 사이트이지요. 이 사이트에서 “유튜브 영상”이나, “구글 지도”의 주소를 넣기만 하면, 그대로 반응형 소스로 만들어 준답니다. 그 원리는 간단합니다. 위에서 언급한 “반응형 박스”를 만들어서 그 안에 영상 코드를 삽입하는 형태인 것이지요. “네이버, 다음(카카오)에서 가져오는 영상의 경우” 해외에서 운영하는 사이트인지라, 주로 유튜브를 대상으로 작동하는 사이트인데, 우리나라의 “네이버”나 “다음”에서 가져온 영상을 그대로 응용할 수도 있습니다. 바로 이 사이트에서 공개하고 있는 코드를 이용하면 되지요. 요즘에는 보통 영상을 “IFRAME” 코드로 가져오는데요. 위의 박스에 있는 코드에서 “”에 해당하는 부분만 바꾸어서 넣어주면 반응형으로 작동하는 영상을 첨부할 수 있답니다. 깔끔한 웹사이트를 운영하는데 알아두면 도움이 되는 정보라고 할 수 있지요. 여기까지, “반응형으로 영상을 가져오는 법”에 대해서 한 번 살펴보았습니다. 도움이 되는 내용이었기를 바랍니다. “반응형으로 영상 첨부하는 방법” 소스 제공 사이트 : http://embedresponsively.com