Win교실 - 새로운 방식의 유튜브 동영상을 가운데 정렬하기 - IFRAME -
지난 왜 유튜브 동영상이 안 올라갈까? - 커뮤니티에서 유튜브 영상 넣기 - 글에서 EMBED 방식의 이전 소스 코드 형식으로 가져온 유튜브 동영상을 가운데 정렬하는 방법으로 DIV 박스로 해당 코드를 감싼 후 스타일 시트로 text-align : center 속성 값을 주면 된다는 이야기를 한 적이 있습니다. 그러니까 아래와 같이 말이죠.
<object width="640" height="360"><param name="movie" value="http://www.youtube.com/v/V2hh4lochpY?version=3&hl=ko_KR"></param><paramname="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 속성을 활용하면 됩니다.
<iframe width="640" height="360" src=" frameborder="0" allowfullscreen></iframe>
</div>
즉, IFRAME 요소를 DIV 요소로 감싸는 것까지는 똑같은데, 이 때 DIV 요소의 너비를 IFRAME 요소의 너비와 동일하게 맞춰주고, 상단과 하단의 여백은 대충 원하는대로, 좌우 여백은 Auto 로 설정해주면 된다는 것이죠. 이렇게 하면 DIV 요소 좌우로 페이지 전체 너비에 맞춰 균등하게 좌우 여백이 들어가게 되고, 결과적으로 DIV 요소가 페이지의 가운데에 정렬되는 효과를 얻을 수 있습니다.
아래의 동영상은 이러한 방법으로 가져와본 유튜브의 IFRAME 방식 동영상입니다.
IFRAME 뿐만 아니라 다른 요소들도 이러한 방식으로 간단하게 가운데 정렬을 시킬 수 있습니다. 아마 스킨이나 레이아웃 쪽에서 전체 컨텐츠가 가운데 정렬된 것들은 최상위 DIV 박스를 이와 같은 방식으로 가운데 정렬시킨 게 대다수일 겁니다. 간단한 거지만 그래도 알아두면 언젠가 어디에선가 다른 곳에서라도 써먹을 날이 오겠죠. 이상입니다. ^^
'window 강좌' 카테고리의 다른 글
LAN 구축 및 PC 미디어 공유하기_고양이2님강좌 (0) | 2014.08.03 |
---|---|
TV팟 동영상을 윈도우포럼 댓글로 퍼오기 (0) | 2014.08.03 |
유튜브 - IFRAME 공유 소스를 EMBED 공유 소스로 바꾸는 방법, 동영상 재생 설정하기 (0) | 2014.08.02 |
유튜브 동영상을 글 속에서 배경음으로 사용하기 - 자동 및 반복 재생 적용 (0) | 2014.08.02 |
왜 유튜브 동영상이 안 올라갈까? - 커뮤니티에서 유튜브 영상 넣기 - (0) | 2014.08.02 |