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

<div style="text-align: center;">
<object width="640" height="360"><param name="movie" value="http://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="http://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="http://www.youtube.com/embed/RNBiaZbFGII" frameborder="0" allowfullscreen></iframe>
</div>

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


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



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

 

 

신고
캐플 블로그에 공개된 글은 반드시 원본 글의 링크를 포함시키는 조건으로 자유롭게 이용하실 수 있습니다.
하지만 블로그의 발전을 위하여 되도록이면 링크로 글을 소개해주시길 부탁드립니다. ^^

- 상업적인 용도의 사이트는 대상에서 제외됩니다. -
- 글에는 오류가 있을 수 있고, 추후 수정 또는 재발행될 수 있습니다. -
  1. BlogIcon 니드뽀폴쉐 2012.09.04 15:52 신고  댓글주소  수정/삭제  댓글쓰기
    음...
    이런 방법이 있군요. @.@

    html은 아닌거 같고...
    써먹을 일이 있을줄 모르겠지만 알아두면 유용할 것 같습니다.
    좋은 정보 감사합니다~ ^^

    덧.한글상태에선 Q키로 로그인이 안되는군요. 참 신기합니다. ^^
  2. BlogIcon Minty99 2012.09.04 21:23 신고  댓글주소  수정/삭제  댓글쓰기
    아 근데요..
    캐플님은 윈도우8 인증 문제 해결 하셨나요??
  3. 우왕 2012.10.19 23:29 신고  댓글주소  수정/삭제  댓글쓰기
    잘보고갑니다^^
  4. BlogIcon a1215 2013.10.14 09:29 신고  댓글주소  수정/삭제  댓글쓰기
    찾고 있었던 유용한 정보네요 ㅎㅎ
    가운데 정렬이 안돼서 정말 고민이었습니다 ㅋ 감사합니다.
  5. 박혜연 2014.07.07 09:36 신고  댓글주소  수정/삭제  댓글쓰기
    정보 유용하게 잘보고 있어요\
    궁금한게 있는데요 모바일에서 보면 한쪽으로 치우쳐 있네요\\
    컴은 중앙이고요
    • BlogIcon CApple 2014.07.07 10:40 신고  댓글주소  수정/삭제
      모바일 웹 브라우저에 따라서 div 를 통한 중앙 정렬시 한 쪽으로 약간 치우치는 브라우저들이 있는 것으로 알고 있습니다.

      그리하여 그러한 모바일 브라우저에서 정확하게 가운데 정렬이 되길 원하신다면 div 의 style 에 padding-right: 10px; 또는 padding-left: 10px; 와 같이 치우치는 쪽으로 약간의 여백을 주어 맞춰주셔야 합니다.

      물론 이렇게 할 경우엔 데스크탑 쪽에서 약간 치우쳐지게 되지만, 데스크탑에선 그렇게 크게 차이가 안 나게 보이기 때문에 모바일 쪽으로 맞춰주는 게 좋을 듯 싶습니다.

댓글을 달아 주세요

- 댓글에선 예의를 지켜주시기 바라며, 블로그지기는 댓글에서 따로 활동하지 않습니다.

* 티스토리 사용자는 여기를 클릭하시면 로그인 됩니다.

BBCode 안내   굵게 밑줄 기울임 취소선   취소선 취소선 취소선 취소선   왼쪽 정렬 가운데 정렬 오른쪽 정렬   코드박스 인용구 이미지   이미지 업로드-Imgur.com