구글 블로그 "반응형 웹페이지" 작성시(PC웹페이지와 모바일에서 동영상 자동 변경(비율) 문제) 동영상 관련 태그에 대한 삽질 경험 정리.

요즘은, 모바일로 검색하는 사람이 많아졌는데 구글 블로그가 참으로 답이 없을 정도로 대응력이 떨어진다는 것을 알 것입니다.
(모바일 관련 위젯은 따로 설정하는 것이 없고, 이미 구글이 정해 놓은 폼을 똑같이 따라갑니다)

가령, 제가 블로그 게시물을 올리고 모바일로 탐색을 해보면 불편한 점이 발견되는데 추가로 수정하고 싶어도 할 수 있는 것이 거의 없다는 것이죠.

이미지를 홈페이지에 올린다고 하면 자동으로 이미지는 테이블 태그에 넣어지는데, 숙련되었다 하더라도 이미지 넣는 것부터 시작해서 좌우 정렬, 동영상 하나 넣는 것까지도 제법 노력이 있어야 됩니다.

오늘은, 요즘 많이 사용하는 "모바일 탐색"에 맞춰 구글 블로그에서 자동 화면 크기(변화)에 대한 삽입된 동영상이 화면(가로 넓이)을 넘쳐버리는 문제에 대해 나름 해결한 방법을 설명할까 합니다.
(PC용 웹에서는 좌우 정렬과 이미지와 동영상 보기가 제대로 구현했다 하더라도, 모바일에서 게시물 배치(프레임)가 제대로 되지 못하는 (반응형 웹페이지)문제에 대한 이야기입니다)

내가 시도 해본 것 중...

*인터넷 검색을 통해 "반응형 웹페이지" 태그를 살펴보면, 대부분 다음과 같은 태그 문장을 알 수 있고 따라하면 해결된다고 합니다.

<div style="position: relative; max-width: 100%; padding-bottom: 56.25%; height: 0;">

<iframe width="16" height="9" src="https://www.youtube.com/embed/유튜브 영상?frameborder="0" allowfullscreen="" style="position: absolute; position: absolute; top: 0; left: 0; width: 100%; height: 100%;"></iframe>

</div>

하지만, 위의 경우(CSS 추가방식이 아님)는 단순한 웹페이지나 프레임 상위에 삽입할 경우나 작동하지.., 테이블 태그가 포함되거나 미디어가 게시물 중간에 삽입, 많은 프레임과 미디어 종류가 동영상이 다수인 경우 제대로 동작하지 않더군요.
(더군다나 저처럼 프레임이 3개이고, 각종 미디어 포함, 테이블 태그와 TR태그등을 사용하면 엉망이 되어 버렸습니다)

살펴 보시죠.
(다음과 같은 방식으로 변경하니, 작동하였습니다)

수정된 완료된 결과물 입니다.

*반응형 웹페이지 자동변경이 안되어 고민이고 이 게시물로 방문했다면, 이 웹페이지 하단 "유튜브 / WEBM"파일을 통해 해결되었음을 알 수 있습니다.

(즉, 반응형 웹페이지 설정 이전에는 모바일에서 유튜브 동영상이 웹 프레임 화면밖으로 넘쳐 버렸었다는 것이죠)

우선 자신의 구글블로그에서 "테마" "맞춤설정"으로 들어갑니다.

자신의 템플릿도 어느정도 영향을 미치기에,

본인이 평소에 선호하는 이미지 사이즈를 고려해서 웹페이지를 작성합니다.
(예 : 만약 내가 주로 블로그를 사용할 때 6~700픽셀 사이즈의 이미지를 넣는다고 가정한다면...)

즉, 웹페이지에 삽입할 영상이(유튜브) 가로 640이라고 할 때 넓은 프레임을 구현하는 웹 브라우저에서는 아무 문제가 없겠지만,
모바일 플랫폼에서 자동으로 맞춰 줄어드는 이미지와 달리 동영상은 양쪽 프레임 때문에 줄어들지 않고 튀어나오게 됩니다.

그러므로 그것을 해결하기 위해 구글 블로그 웹게시물에서는...

인터넷에서 검색하여 시도한 태그는 작동하지 않았기에 다른 방법으로 "CSS"를 추가하는 방식을 선택했습니다.
(인터넷을 뒤져 지정된 프레임 템플릿 구조인 구글 블로그에 대응 법으로는, 이것이 가장 효과적이라 판단 되었습니다)

그림처럼 글자(다운로드는 바로 아래)를 모두 복사해서 블로그 테마 디자이너 CSS 항목에 추가해 줍니다.
(세부 설명은 다음과 같습니다)

초록색 ".video" 와 ".video-container" 는 웹페이지 작성시 내가 호출할 속성 이름입니다.
56.25%는 알려진 16:9 비율값인데, 구글 템플릿에 따라 달라져 저는 51.80%로 맞추었습니다.
(왜 2개가 있냐하면, 미디어 종류마다 가로/세로 비율이 달리 표현되었기 때문입니다)

위의 .video는 웹페이지 WEBM 비디오용이고, 뒤의 video-container 는 웹페이지내 유튜브 대응용 입니다.
(서로 다른 종류 중, WEBM 영상은 56.25%를 적용하고, 유튜브는 98% 51.80% 사이즈를 적용 시킬 것이라는 내용입니다)

잘 모르겠다면, 일단 이것을 "DownLoad" 받아 CSS에 추가하고, 우측 상단 "블로그에 적용"을 누르세요.

그리고, 작성된 구글 블로그 웹페이지에서...

적용시킬 동영상이 WEBM 이라면 .video를 사용하고, 유튜브라면 .video-container 를 사용하면 됩니다.

설명 : 

video를 호출받은 CSS 내용에 따라 크기가 웹페이지에 맞게 변경되며 가로/세로 100%  16:9비율이 56.25%로 맞춰 적용됩니다.
(이것은 블로그 너비와 템플릿에 따라 달라질 수 있습니다)

video-container를 사용하면, CSS 내용에 따라 크기가 웹페이지에 맞춰 변경되며 가로/세로 98%, 16:9 비율이 51.80% 가 적용됩니다.
(이것은 블로그 너비와 템플릿에 따라 달라질 수 있습니다)

*이제 TABLE 태그를 사용한 미디어가 있거나, 미디어 사이에 중간에 코드를 삽입해도 문제가 발생하지 않게 되었습니다.

위 그림처럼, 적용한 후 웹페이지를 작성한 다음 모바일이나 구글 모바일에서 시험해보면, 화면이 넘치지 않는 유튜브 동영상을 볼 수 있습니다.
(웹페이지 반응형으로 동영상이 모바일 화면에 따라 변경될 것입니다)

*참고 사항(미디어 포함 태그 사용시) :

*모바일 보기에서는 구글 블로그에 삽입된 이미지가 모바일에 맞춰 자동 변경되므로, 별도 작업이 필요 없습니다.
(jpg, png, gif....., 물론, 웹페이지 게시물 작성시는 사이즈를 일정하게 맞춰야 하겠죠?)

*Table 태그에 포함 시켜 저 문구를 사용하지 마십시오.
(동작하지 않습니다)

*해당 동영상의 TD TR 태그 사용시에도 작동하지 않을 수 있습니다.

* 아래 문구는 해당 종류의 영상마다 반드시 넣어 십시오.

 WEBM : <div class="video" style="clear: both; text-align: center;">

유튜브 : <div class="video-container" style="clear: both; text-align: center;">

*WEBM 영상은 아직 모바일 비율로 인한 반응형은 작동하지만, 화면이 줄어들지는 않습니다.
(이것은 저도 해결 방법이 없습니다)

즉, 화면이 넘치는 것만 해결한 상태입니다.
*다른 좋은 방법을 알고 있거나, 해결 하신 분은 알려주십시오*

Tip1 :
구글 블로그에서는 웹페이지 작성시 이미지나 동영상을 정렬은 가운데 정렬을 추천하며...
HTML 수정을 통해 테이블로 묶여있는 테이블과 테이블, 이미지와 이미지(or 동영상) 사이의 /BR 태그를 삭제하는 것이 깔끔합니다.
(좌우 정렬보다 미디어는 중앙 정렬 태그를 적용하십시오)

Tip2 :
웹페이지를 작성할 때부터 이미지나 동영상은, 가로 크기를 통일 하십시오.
(공통적으로 프레임도 작성될 웹페이지의 멀티미디어 소스를 고려한 사이즈로 수정하는 것이 좋습니다)

WEBM 테스트 영상
(웹페이지 정상, 모바일에서 영상 사이즈가 넘치지는 않지만 전체 프레임은 유지가능)

유튜브 테스트 영상
(웹페이지 정상, 다양한 모바일 사이즈에 맞춰 자동으로 프레임을 유지)