반응형 홈페이지에 맞추어 출력되는 동영상 삽입하기

Advanced Responsive Video Embedder 라는 플러그인은 유튜브나 Vimeo 동영상 삽입을 위한 플러그인입니다.

 

예제 보기 : http://makebct.cafe24.com/?p=188

 

 

1. 유튜브 공유-소스코드로 동영상 삽입하기

기존 유튜브의 ‘공유’ 기능을 통해 아래와 같은 코드를 본문에 작성하여 동영상을 삽입해 왔습니다.

<iframe width="735" height="413" src="https://www.youtube.com/embed/b09U0KLv6I4?rel=0" frameborder="0" allowfullscreen></iframe>

 

 

2. Advanced Responsive Video Embedder 플러그인으로 동영상 삽입하기

[새 글 쓰기]를 클릭하여 글 작성창에 보면 아래와 같이 ‘Advanced Responsive Video Embedder’ 플러그인의 [Embed Video]라는 버튼이 보입니다.

zpost_13img01

 

 

동영상을 삽입할 위치에 커서를 위치시킨 후, [Embed Video] 버튼을 클릭하면 다음과 같은 동영상 삽입 창이 보여지고, 다음 그림에 보이는 것과 같이 원하시는 동영상의 주소를 입력하고 나머지 항목을 입력합니다.

동영상이 있는 페이지의 웹주소창의 주소를 입력해도 되고, 공유에서 지원하는 짧은 주소를 입력해도 됩니다.

zpost_13img03

 

 

3. 동영상 출력

위의 두 가지 방법으로 동영상을 본문에 삽입하였을 경우 아래의 그림과 같이 별 차이가 없어 보입니다.

zpost_13img02

 

하지만 모바일 환경에서 보면 다릅니다.

유튜브의 ‘공유’ 코드를 이용해 삽입된 동영상의 경우 세로 길이는 변화없이 위/아래로 검은 띄가 둘러져 있는것처럼 보여 아주 보기가 싫습니다.

 

‘Advanced Responsive Video Embedder’ 플러그인을 통해 삽입된 동영상은 반응형 웹페이지의 가로폭에 자동으로 맞추어져 보기 좋게 출력되는 것을 확인할 수 있습니다.

zpost_13img04

 

비단 반응형에서 보여지는 모양만으로 이 플러그인이 쓰인다기보다는 초보자도 쉽게 동영상을 넣어 글을 작성할 수 있다는 것으로도 ‘Advanced Responsive Video Embedder’ 플러그인의 쓰임새는 아주 좋아 보입니다.

 

 

 

4 Responses

Leave a Reply

Your email address will not be published. Required fields are marked *

인기 글

Ubuntu 22.04 LTS에 Python 3.8 or 3.9 설치 방법
서버 : Vultr 클라우드OS: Ubuntu 22.04 LTS사용자 계정 생성하여 설치 진행함1. Start with the system updatesudo apt update...
오라클 클라우드 OCI 가입 드디어 성공 했습니다 (상세 후기)
2023년 2월 16일에 ‘오라클 클라우드 지급 검증 실패 글‘을 남긴 적이 있습니다.그 때 검색을 통해 해결 방법을 찾아 보았고, 당시 성공했던 분들의...
초거대 AI 구축을 위한 LLM 및 sLLM 동향
1.LLM과 sLLM 개념■ 관련 용어LLM(Large Language Model) 및 sLLM(small LLM)의 개념을 파악하기 위하여 관련된 태스크, 데이터, 모델...
[Ubuntu] ufw 방화벽 설정
ufw란?iptables 보다 쉽고 직관적으로 방화벽 설정을 할 수 있는 패키지ufw 상태 관리 명령어ufw의 상태를 관리하는 명령어# ufw 활성화 $ sudo...
워드프레스 홈페이지를 HTML 파일로 변환하는 방법
이전에 워드프레스 홈페이지를 HTML로 변한할 수 있는지 요청이 왔을 때 Simply Static 플러그인으로 워드프레스 홈페이지를 HTML로 변환하는 방법을 테스트한 적이 있습니다....