동영상을 반응형으로 만들기 해결

이 글에서 이 스킨에서 유튜브를 자동으로 반응형 만드는 것을 해결한 것에 대해서 적으려 한다.

 

티스토리에서 동영상 삽입

 

티스토리 새 에디터를 사용하면 유튜브를 삽입할 때 기본모드에서 단지 공유에서 복사한 후 글에 넣고 엔터를 치면 다음 줄로 넘어가 동영상이 나온다. 그리고 필요하다면 동영상 링크를 지운다. 아래 동영상을 그렇게 삽입했다. 유튜브에서 공유 > 퍼가기로 소스를 복사한 후 에디터를 기본모드에서 HTML로 변환 후 소스를 삽입하는 것도 가능다.

 

이런 방식은 네이버 블로그 에디터에서 가장 유사하다. 네이버 블로그 에디터와 거의 과정이 같은데 다른 것이 엔터 과정만 없는 것이다. 네이버 블로그에서는 복사한 것만 붙이면 된다.

 

Frankfurt in 8K - 8K UHD 4320p

---

 

자세히 설명하면 위 동영상을 공유에서 아래 그림 1번 링크를 복사하여 에디터에 붙여 넣었다. 마지막에 동영상만 남도록 링크를 삭제했다. 나는 구 에디터를 사용할 때 공유에서 퍼가기 통해 소스를 퍼가 멀티미디어로 동영상을 삽입했다. 참고로 멀티미디어로 삽입하면 HTML에서 삽입할 필요 없었다.

 

 

새 에디터에서 간단하게 동영상을 첨부할 수 있으니 소스를 퍼간 후 HTML 모드에서 동영상을 삽입하지 말았으면 한다. 이런 방식은 티스토리 앱에서도 할 수 있다. 

 

 

반응형이 안 됐다

 

내가 작년 4월 중순 이후 새 에디터를 사용했다. 기본 모드에서 동영상을 삽입하면 방식으로 사용하면 이 블로그 스킨에서 반응형이 안 된다는 것을 알았다.  그래서 귀찮아도 예전에 하던 퍼가기로 동영상을 퍼온 후 아래 그림에서 볼 수 있는 <div class="vid">~</div>라는 HTML에서 반응형 태그를 삽입했다. 처음에 엄청 고생했다. 왜냐하면 내가 삽입한 반응형 태그가 없어졌기 때문이다.

 

<div class="vid">는 내 스킨에서만 사용하는 코드니 다른 스킨에서는 해당이 안 된다. 다른 스킨에서 반응형이 된다고 생각하지 말았으면 한다.

 

반응형 동영상 만들기 

 

기본모드에서 해보고 싶어졌다.

 

올해 2월까지 위와 같이 HTML에서 반응형 태그를 삽입하는 방식을 고수하다가 삽입한 태그가 없어지지 않는다는 것을 알았다. 구 에디터가 없어진 후 욕을 먹으니 에디터의 버그를 하나씩 개선하는 것 같다. 그 전에는 수정만 하면 태그가 없어졌거든요. 욕을 먹지 않으니 개선을 하지 않는다. 

 

 

다른 글을 쓰다가 당장은 아니더라도 나중에 네이버 블로그처럼 티스토리 에디터에서도 HTML 사용을 없앨 것 같다는 생각이 들었다. 그랫 이번 기회에 HTML 모드가 아닌 기본모드에서 동영상을 삽입하여 동영상을 반응형으로 만드는 방식을 만들기로 하였다.

 

티스토리를 오래 하다 보니 예전 방식을 고수하면 안 된다는 것을 알게 된다. 그리고 익숙한 예전 기능을 버리고 새로운 기능으로 갈아타야 한다는 것을 느낀다. 예전 기능이나 사용이 저조한 기능은 사라진다.

 

해결했다

 

구글을 검색하다가 새 에디터 기본모드에서 동영상을 삽입하면 반응형으로 만들어주는 스크립트가 있었다. 해결 방법은 여기에서 찾을 수 있고 HTML 편집에 아래 그림과 같이 해주어 해결했다. 

 

스크립트 삽입

 

참고로 위 그림에서 article은 글에 해당하는 이 스킨의 클래스이고 아래 동영상은 4K고 위는 8K 영상이다. 내가 알기로 유튜브에서 8K도 지원하는 것으로 아는데 어떤 기기는 8K만 아니라 4K도 버벅거릴 것이다.

 

ITZY(있지) "달라달라(DALLA DALLA)" M/V - 4K UHD 2160p

크롬, 웨일, 엣지 등 사용자는 F12 단축키를 눌러 브라우저 크기를 조절하면 동영상도 자동으로 조절될 것이다. 꼭 F12를 누를 필요 없고 동영상 크기가 조절되게 하면 된다.

 

---

이 블로그 스킨에서 그렇다는 것이니 오해 없도록 했으면 한다.