Love all, trust a few, do wrong to none.

티스토리 블로그 스킨을 반응형으로 바꾸면서,

점점 욕심은 끝이 없어졌다.ㅋㅋㅋㅋㅋㅋㅋㅋ

무엇보다 영상이 반응형으로 올라가지 않는다는 것이 신경이 쓰였다.

예를 들면,

유투브 영상을 첨부한 포스팅의 창을 줄이면 ....

다음과 같이 창의 가로폭은 줄지먄, 세로 폭은 줄지 않는다.

글씨가 가리거나 영상을 보는데 불편함이 있는 것은 아니지만 참.... 거슬린다.

그래서 알아낸, 유투브 영상 반응형으로 올리기

우선은 관리 페이지에서 CSS를 수정해 준다.

아래 Style.css에 다음을 추가한다.

원하는이름 부분은 원하는 div class 이름을 적으면 된다. (나는 너무 개인적인걸로 해섴ㅋㅋㅋㅋ 공개할 수가 엄쯤)

iframe, object, embed 를 보면 알 수 있듯,

iframe , object, embed 태그를 사용할 때 div class를 '원하는이름'으로 정해주면 창 폭에 따라 크기가 알아서 움직여주는 반응형으로 올라간다!

원하는 유투브 소스를 가져온 뒤,

업로드 할 때마다 다음과 같은 형태로 올리면 된다.

원래 유투브 퍼올 때, 소스가 iframe이라 css에 iframe만 넣어주면 되는건데...

이상하게 티스토리로 퍼와서 저장하면 embed로 전환된다.

그래서 embed 태그도 추가해준 것..

예시로 위의 포스팅을 수정해보았다.

가린 부분에 원하는이름을 넣어주고

앞 뒤를 추가! 저장하면된다.

이것도 처음엔 iframe으로 퍼왔는데 embed로 바껴있음;ㅅ;ㅋㅋㅋ

그래서 embed~~ /embed 앞뒤에 div class 와 /div를 넣어 주었습니다.

짜잔-

이제 창을 줄여도 가로세로 비율을 유지하며 줄어든다.