며칠 전에 부트스트랩 3,4 버전에서 4:3 등 4가지 비율로 유튜브 동영상을 반응형으로 만드는 것을 알아 보았다. 그리고 아래에서 HTML을 사용하여 16:9 비율로 유튜브, 네이버TV, 카카오TV, 비메오를 삽입하면서 반응형이 되게 하려 한다. 참고로 부트스트랩 3과 4에서 동영상을 4가지 비율과 반응형 삽입하는 것에 대한 글을 2018/10/16 - 부트스트랩에서 유튜브 반응형에서 볼 수 있다.
티스토리 에디터에서 위에서 보듯 유튜브를 포함하여 네이버TV, 카카오TV 동영상도 삽입할 수 있다. 소스에 class="embed-responsive embed-responsive-16by9"와 class="embed-responsive-item"를 추가하여 16:9 비율로 동영상을 반응형으로 만들 수 있다. 단, 부트스트랩을 사용하는 스킨만 가능하니 다른 스킨에서 하지 말았으면 한다. 글을 대충 읽어서 헛수고 하는 사람이 가끔 있다. 참고로 2018/10/11 - 카카오V 동영상 재생할 수 없었던 이유에서 적었듯 kakaoTV 동영상을 재생할 수 없으면 확장 프로그램에서 광고 차단 프로그램을 일시 중지했으면 한다. 그러면 재생이 된다.
위 동영상은 비메오(vimeo)로 위키백과에서 정의하기를 비메오는 사용자가 직접 제작한 동영상을 업로드하고 공유하며 볼 수 있는 동영상 공유 웹사이트라 한다. 비메오 동영상은 유튜브처럼 국내 웹페이지에서 많이 사용하지 않지만 가끔 사용하는 곳을 본다. 사람들이 별로 사용하지 않으니 특이한 것 같다고 느끼는지...
비메오 동영상도 유튜브, 네이버TV, 카카오TV과 같이 삽입할 수 있을 뿐만 아니라 16:9 비율로 반응형으로 만들 수 있다. 결론은 티스토리 블로그 에디터에서는 모든 동영상을 삽입할 수 있다. 그리고 동영상을 페이지를 떠나지 않고 볼 수 있다. 또한 그 동영상을 부트스트랩 3,4 버전에서 지원하는 16:9 비율을 포함한 1:1, 4:3, 21:9의 모든 비율로 볼 수 있다.
위는 JsFiddle이라는 것을 삽입한 것으로 JsFiddle이 무엇인가에 대한 유튜브 동영상을 21:9 비율로 삽입한 것이다. 비교를 위해 HTML을 사용할 수 없는 티스토리 블로그의 페이지 에디터로 위와 같이 해봤으면 한다.
'블로그 > 국내 블로그' 카테고리의 다른 글
| 티스토리블로그에 새로 추가된 통계 (0) | 2018.12.10 |
|---|---|
| 티스토리 첫페이지 꾸미기 3가지 기능 (0) | 2018.11.27 |
| 이 블로그 https 적용완료 (0) | 2018.10.29 |
| 아쉽고 부럽다 (0) | 2018.10.20 |
| 모바일에서 홈화면 (0) | 2018.10.02 |
| 티스토리, 글에서 썸네일 추출 (0) | 2018.09.25 |
| 티스토리, 카테고리 다른 글 (0) | 2018.09.22 |
| SNS 유입보고서 (0) | 2018.09.16 |
