유튜브 동영상 반응형 코드 (자바스크립트 없이 CSS 만으로 해결 가능)
생각해보니 구글 블로그(Blogger)에 유튜브 반응형 코드를 세팅하지 않았습니다. 티스토리는 자동으로 반응형으로 생성되는데 비해 블로거는 상당히 불편하죠. 모든게 수동입니다. 그나마 다행인건 구글의 플랫폼 중 하나가 유튜브이므로 블로거에서 유튜브 링크를 넣는 기능은 있습니다. 다만 이게 고정형으로 본문에 적용되는게 문제입니다. 가로 사이즈가 360px로 고정되요. 이것을 해결하기 위해서 CSS에 별도 세팅을 해줘야 합니다.
Blogger에 YOUTUBE 영상 넣는 방법
일단 구글 블로그에 유튜브 영상을 본문에 넣는 방법입니다. 간단합니다. 글쓰기 메뉴 중 동영상 아이콘을 눌러서 YouTube로 들어갑니다.
동영상 추가 창이 떴습니다. 검색 탭으로 들어가서 원하는 키워드로 검색 후 사용하고자 하는 영상을 찾으셨다면 해당 영상을 누르고 왼쪽 아래의 선택 버튼을 누르면 본문에 들어가게 됩니다.
유튜브 영상 HTML 코드
그렇게 구글 블로거 본문에 들어간 유튜브의 HTML 기본 형태는 다음과 같습니다.
|
1
2
3
4
5
6
7
8
9
|
<
div class="separator"
style="clear: both; text-align: center;"
>
<
iframe
allowfullscreen=""
class="BLOG_video_class"
height="266"
src="유튜브영상 URL공유링크"
width="320"
youtube-src-id="e98iOOjQJzE"
>
<
/
iframe
>
<
/
div
>
|
cs |
즉 iframe이 핵심 요소이며 부모 요소는 separator 라는 클래스명을 가진 div입니다. 단! 해당 클래스명은 이미지를 본문에 삽입할때도 적용되는 클래스명이기도해서 해당 클래스에 별도로 CSS 스타일을 세팅하는건 피해야 합니다. 그럼 이미지에도 영향을 줄테니까요. 따라서 해당 클래스명에 별도의 클래스명을 하나 더 추가해 줍니다. 저는 youtubeWrap 이라는 클래스명으로 작업했습니다. 따라서 유튜브의 iframe 부모요소인 div에는 아래와 같은 클래스명이 완성되어야 합니다.
<div class="separator youtubeWrap">...</div>
이렇게 말이죠. 그리고 CSS는 아래의 내용을 추가해 주세요.
YouTube 반응형 CSS 코드
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
/* 유튜브 반응형 */
.youtubeWrap {
position
:
relative
;
overflow
:
hidden
;
margin
:
30px 0
;
padding-bottom
:
56.25%
;
height
:
0
;
}
.youtubeWrap
>
iframe {
position
:
absolute
;
top
:
0
;
left
:
0
;
width
:
100%
;
height
:
100%
;
}
|
cs |
이 CSS 코드를 여러분들께서 사용하고자 하는 플랫폼에 적용시켜 주시면 됩니다. 중요한건 유튜브의 iframe과 부모 요소인 div와의 관계입니다. 이 둘은 반드시 존재해야 하는 태그인 것입니다. position이 각각 relative와 absolute니까요. 이렇게 세팅하시면 이제 유튜브가 반응형으로 잘 적용될 것입니다. 오늘 내용 끝!
댓글
댓글 쓰기
비밀글은 삭제합니다. 공개글로 남겨주시기 바랍니다.