지난 왜 유튜브 동영상이 안 올라갈까? - 커뮤니티에서 유튜브 영상 넣기 - 글에서 EMBED 방식의 이전 소스 코드 형식으로 가져온 유튜브 동영상을 가운데 정렬하는 방법으로 DIV 박스로 해당 코드를 감싼 후 스타일 시트로 text-align : center 속성 값을 주면 된다는 이야기를 한 적이 있습니다. 그러니까 아래와 같이 말이죠.
근데 문제는 이게 EMBED 같은 요소에서는 먹히는데 새로운 유튜브의 소스 코드 형식인 IFRAME 요소에서는 먹히질 않는다는 것이 문제입니다. IFRAME 으로 가져와야 PC 뿐만 아니라 폰이나 태블릿에서도 동영상이 제대로 출력되고, 더욱이 난 가운데 정렬하는 게 좋은데 말이죠. 이와 같이 Text-Align 속성이 먹히질 않는 대상을 가운데 정렬할 때에는, 마찬가지로 DIV 박스를 사용하고 여기에 새롭게 여백을 의미하는 Margin 속성을 활용하면 됩니다.
즉, IFRAME 요소를 DIV 요소로 감싸는 것까지는 똑같은데, 이 때 DIV 요소의 너비를 IFRAME 요소의 너비와 동일하게 맞춰주고, 상단과 하단의 여백은 대충 원하는대로, 좌우 여백은 Auto 로 설정해주면 된다는 것이죠. 이렇게 하면 DIV 요소 좌우로 페이지 전체 너비에 맞춰 균등하게 좌우 여백이 들어가게 되고, 결과적으로 DIV 요소가 페이지의 가운데에 정렬되는 효과를 얻을 수 있습니다.
아래의 동영상은 이러한 방법으로 가져와본 유튜브의 IFRAME 방식 동영상입니다.
IFRAME 뿐만 아니라 다른 요소들도 이러한 방식으로 간단하게 가운데 정렬을 시킬 수 있습니다. 아마 스킨이나 레이아웃 쪽에서 전체 컨텐츠가 가운데 정렬된 것들은 최상위 DIV 박스를 이와 같은 방식으로 가운데 정렬시킨 게 대다수일 겁니다. 간단한 거지만 그래도 알아두면 언젠가 어디에선가 다른 곳에서라도 써먹을 날이 오겠죠. 이상입니다. ^^
<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키로 로그인이 안되는군요. 참 신기합니다. ^^
HTML 과 CSS 입니다. ^^
아 근데요..
캐플님은 윈도우8 인증 문제 해결 하셨나요??
^^
ㅎㅎ 성공하셨나보네요.
잘보고갑니다^^
^^
찾고 있었던 유용한 정보네요 ㅎㅎ
가운데 정렬이 안돼서 정말 고민이었습니다 ㅋ 감사합니다.
정보 유용하게 잘보고 있어요\
궁금한게 있는데요 모바일에서 보면 한쪽으로 치우쳐 있네요\\
컴은 중앙이고요
모바일 웹 브라우저에 따라서 div 를 통한 중앙 정렬시 한 쪽으로 약간 치우치는 브라우저들이 있는 것으로 알고 있습니다.
그리하여 그러한 모바일 브라우저에서 정확하게 가운데 정렬이 되길 원하신다면 div 의 style 에 padding-right: 10px; 또는 padding-left: 10px; 와 같이 치우치는 쪽으로 약간의 여백을 주어 맞춰주셔야 합니다.
물론 이렇게 할 경우엔 데스크탑 쪽에서 약간 치우쳐지게 되지만, 데스크탑에선 그렇게 크게 차이가 안 나게 보이기 때문에 모바일 쪽으로 맞춰주는 게 좋을 듯 싶습니다.