새로운 방식의 유튜브 동영상을 가운데 정렬하기 - IFRAME -

지난 왜 유튜브 동영상이 안 올라갈까? - 커뮤니티에서 유튜브 영상 넣기 - 글에서 EMBED 방식의 이전 소스 코드 형식으로 가져온 유튜브 동영상을 가운데 정렬하는 방법으로 DIV 박스로 해당 코드를 감싼 후 스타일 시트로 text-align : center 속성 값을 주면 된다는 이야기를 한 적이 있습니다. 그러니까 아래와 같이 말이죠.

<div style="text-align: center;">
<object width="640" height="360"><param name="movie" value="https://www.youtube.com/v/V2hh4lochpY?version=3&amp;hl=ko_KR"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="https://www.youtube.com/v/V2hh4lochpY?version=3&hl=ko_KR" type="application/x-shockwave-flash" width="640" height="360" allowscriptaccess="always" allowfullscreen="true"></embed></object>
</div>

근데 문제는 이게 EMBED 같은 요소에서는 먹히는데 새로운 유튜브의 소스 코드 형식인 IFRAME 요소에서는 먹히질 않는다는 것이 문제입니다. IFRAME 으로 가져와야 PC 뿐만 아니라 폰이나 태블릿에서도 동영상이 제대로 출력되고, 더욱이 난 가운데 정렬하는 게 좋은데 말이죠. 이와 같이 Text-Align 속성이 먹히질 않는 대상을 가운데 정렬할 때에는, 마찬가지로 DIV 박스를 사용하고 여기에 새롭게 여백을 의미하는 Margin 속성을 활용하면 됩니다.

<div style="width: 640px; margin: 0px auto;">
<iframe width="640" height="360" src="https://www.youtube.com/embed/RNBiaZbFGII" frameborder="0" allowfullscreen></iframe>
</div>

즉, IFRAME 요소를 DIV 요소로 감싸는 것까지는 똑같은데, 이 때 DIV 요소의 너비를 IFRAME 요소의 너비와 동일하게 맞춰주고, 상단과 하단의 여백은 대충 원하는대로, 좌우 여백은 Auto 로 설정해주면 된다는 것이죠. 이렇게 하면 DIV 요소 좌우로 페이지 전체 너비에 맞춰 균등하게 좌우 여백이 들어가게 되고, 결과적으로 DIV 요소가 페이지의 가운데에 정렬되는 효과를 얻을 수 있습니다.


아래의 동영상은 이러한 방법으로 가져와본 유튜브의 IFRAME 방식 동영상입니다.

IFRAME 뿐만 아니라 다른 요소들도 이러한 방식으로 간단하게 가운데 정렬을 시킬 수 있습니다. 아마 스킨이나 레이아웃 쪽에서 전체 컨텐츠가 가운데 정렬된 것들은 최상위 DIV 박스를 이와 같은 방식으로 가운데 정렬시킨 게 대다수일 겁니다. 간단한 거지만 그래도 알아두면 언젠가 어디에선가 다른 곳에서라도 써먹을 날이 오겠죠. 이상입니다. ^^

★ 왜 유튜브 동영상이 안 올라갈까? - 커뮤니티에서 유튜브 영상 넣기 -
★ 새로운 방식의 유튜브 동영상을 가운데 정렬하기 - IFRAME -
★ 유튜브 - IFRAME 공유 소스를 EMBED 공유 소스로 바꾸는 방법, 동영상 재생 설정하기
★ 유튜브 동영상을 글 속에서 배경음으로 사용하기 - 자동 및 반복 재생 적용
★ 유튜브 동영상에 포함된 특수효과 없이 동영상 공유하기 - 주석, Annotations 처리