<div style="text-align: center;">
<object width="640" height="360"><param name="movie" value="https://www.youtube.com/v/V2hh4lochpY?version=3&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>
<object width="640" height="360"><param name="movie" value="https://www.youtube.com/v/V2hh4lochpY?version=3&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 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 처리
★ 새로운 방식의 유튜브 동영상을 가운데 정렬하기 - IFRAME -
★ 유튜브 - IFRAME 공유 소스를 EMBED 공유 소스로 바꾸는 방법, 동영상 재생 설정하기
★ 유튜브 동영상을 글 속에서 배경음으로 사용하기 - 자동 및 반복 재생 적용
★ 유튜브 동영상에 포함된 특수효과 없이 동영상 공유하기 - 주석, Annotations 처리
이런 방법이 있군요. @.@
html은 아닌거 같고...
써먹을 일이 있을줄 모르겠지만 알아두면 유용할 것 같습니다.
좋은 정보 감사합니다~ ^^
덧.한글상태에선 Q키로 로그인이 안되는군요. 참 신기합니다. ^^
캐플님은 윈도우8 인증 문제 해결 하셨나요??
가운데 정렬이 안돼서 정말 고민이었습니다 ㅋ 감사합니다.
궁금한게 있는데요 모바일에서 보면 한쪽으로 치우쳐 있네요\\
컴은 중앙이고요
그리하여 그러한 모바일 브라우저에서 정확하게 가운데 정렬이 되길 원하신다면 div 의 style 에 padding-right: 10px; 또는 padding-left: 10px; 와 같이 치우치는 쪽으로 약간의 여백을 주어 맞춰주셔야 합니다.
물론 이렇게 할 경우엔 데스크탑 쪽에서 약간 치우쳐지게 되지만, 데스크탑에선 그렇게 크게 차이가 안 나게 보이기 때문에 모바일 쪽으로 맞춰주는 게 좋을 듯 싶습니다.
댓글을 달아 주세요