유튜브 동영상 사이즈 반응형으로 적용시키기

본업으로는 아니지만, 가끔씩 홈페이지를 구축할 일이 생기는데요. 이번에는 랜딩페이지를 간단하게 제작하는 일이어서 손쉽게 제작을 하는중에 유튜브 동영상 사이즈가 반응형 사이트에서 크기가 제대로 안나오는 문제가 생겼습니다.


유튜브 동영상 사이즈 반응형으로 적용

반응형으로 적용시키는 방법을잘 모를때에는 세로크기의 절대사이즈를 지정해 놓고 그크기대로 화면에 나타나게 변경을 시켰는데요. 비율대로 따라가지 않다 보니, 보여주고 싶은 크기대로 안보여주게 되는 문제가 생겼습니다.

특정 사이즈에 고정이 되다보니 디바이스 화면이 바뀌면 문제가 생기게 되는것이죠. 그래서 알아봤던게 널리쓰이는 유튜브의 태그를 감싸써 처리하는 방법을 찾아서 간단하게 해결을 했습니다.

 

 

그리고 주의하셔야 할점이 소스코드를 가져오는 방법이 따로 있다는 사실입니다. 절대로 공유하기 해서 주소를 가져오셔서는 안됩니다.

 

 

유튜브 화면에서 보시면 아래쪽에 공유버튼이 있습니다.

 

 

공유버튼을 클릭하면, 공유주소가 나타나는데요. 이주소로는 유튜브 재생전용 주소이기 때문에 홈페이지나 블로그에 삽입하는 주소는 아닙니다.

 

 

 

 

상단의 소스코드 영역을 클릭하여 주세요.

 

 

 

이렇게 진행하시면 iframe 으로 시작하는 소스코드를 보실 수 있습니다. 이러한 코드가 홈페이지에 삽입될 주소입니다.

 

 

첨에 제가 포스팅을 다시할까 생각도 해보았는데, 유명한 블로그에서 내용을 가이드 해주고 있어서 소개를 해드립니다.

  

CMS FACTORY 블로그에서 해당글을 보았는데, 스킨제작도 하고 되게 유명한 곳이죠.

 

https://www.cmsfactory.net/node/20765


위의 글을 참고해보시면 단일 유튜브 링크나 복수의 유튜브링크를 처리할 수 있는 기법을 소개해주고 있습니다.

원리는 간단합니다. 바로 유튜브링크의 소스크기의 비율을 유지하기 위해서 유튜브내 CSS사이즈는 100%로 동일하게 가고 포지션 영역은 절대값으로 상위 태그를 따라가게 만들었고, 감싸는 태그에서는 가로크기와 세로크기를 유튜브 사이즈로맞춰서 절대값을 주었습니다.

 

유튜브에서 소스를 가져오면 아래와 같은 양식을 지니게 됩니다.

 

<iframe width="560" height="315" src="https://www.youtube.com/embed/RnDSODY7bVE" frameborder="0" gesture="media" allowfullscreen></iframe>

 

 

소스를 보시면 이미 가로크기와 세로크기가 정해져 있으며, 이 크기에 따라서 HTML에 표기가 됩니다. 크기가 고정이 되기에 홈페이지에 해당 소스를 삽입하면 문제가 생겨 버리는데요. 디바이스 해상도에 따라서 화면이 짤리거나 비율이 안 맞게 되어 버립니다.

 

이걸 해법으로 푼 방법이 참 대단하다 느끼는데요. 가로세로 크기를 아예 없애버리고, 반응형으로 가로길이를 맞추게 한뒤 비율을 위해서 다시한번 태그를 감싸는 방법을 취했더라구요.

 

1. 유튜브의 가로세로 크기를 제대로 나오게 반응형으로 구성을 한다.

2. 감싸주는 크기를 비율대로 나타나게 한다.

 

딱 두가지로 구성을 하였습니다. 소스를 보셔서 잘 분석 해보시기 바랍니다. 첨에 유튜브 동영상을 사이즈에 맞게 하려고 이것저것 궁리를 많이 했었는데, CSS를 조금씩 공부하다보니 이제야 눈이 좀 떠지는 느낌입니다.

 

그리고 jQuery를 이용하면 훨씬 간단하게 처리가 가능한데요. 다른걸 하실필요없이 간단하게 소스 추가 만으로 해결이 되니 jQuery 활용을 권장드립니다.