makeBCT

#AI #OpenAI #Chatbot #Cloud #WordPress

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

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 *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

인기 글

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일에 ‘오라클 클라우드 지급 검증 실패 글‘을 남긴 적이 있습니다.그 때 검색을 통해 해결 방법을 찾아 보았고, 당시 성공했던 분들의...
WSL2/Ubuntu 22.04 LTS에 Anaconda 설치 
WSL2/Ubuntu 환경에서 Python 버전별로 가상환경을 만드는 방법 중 그나마 Anaconda 방법이 좋은 것 같네요. 설치 방법은 간단합니다.1. apt update사용자...
Permission denied (publickey) 해결 방법
Plesk에서 생성된 system user로 ftp 접속 시 다음과 같은 에러 메시지가 발생하면서 접속이 되지 않습니다.상태: 152.67.193.32:49152에 연결... 응답: fzSftp...
사용자 작성 모듈 import 시 에러)(ModuleNotFoundError: No module named
파이썬 모듈을 만들고 테스트 할 때 ModuleNotFoundError: No module named 에러가 발생한 경우원인파이썬은 모듈을 불러올 때 모듈 설치 경로와 자신의...

BCT Ai Chatbot

답변을 준비중입니다 . . .