블로그에 유튜브 동영상 반응형으로 삽입하는 방법

유튜브 많은 정보가 있습니다. 구글이나 네이버보다 유튜브에서 검색을 먼저하는 사람도 많습니다. 그 동영상 콘텐츠들은 유튜브에서 소비되기도 하지만, 공유 기능을 통해서 여러 곳으로 퍼져나갑니다. 유튜브 크리에이터가 자신의 블로그에 동영상을 게재해서 홍보하기도 합니다.

유튜브의 동영상을 공유하는 기능은 유튜브에서 제공하고 있습니다. 영상 밑의 공유를 클릭하면 여러 가지 방식이 나옵니다.

워드프레스라면

https://www.youtube.com/embed/ybhXVSAdIRE

만 복사해서 붙여 넣으면 됩니다. 자동으로 영상을 보여주기는 하지만, 고정 크기로 삽입됩니다.

만약 본문에 꽉 차고 반응형으로 변하도록 넣고 싶다면 수작업을 거쳐야 합니다. 퍼가기를 클릭하고...

기다란 코드를 복사합니다.

아래처럼 생긴 코드인데...

<iframe width="560" height="315" src="https://www.youtube.com/embed/ybhXVSAdIRE" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

다음처럼 div 태그로 감싸고 iframe에 style 속성을 추가합니다.

<div style="position: relative; height:0; padding-bottom: 56.25%;">
<iframe width="560" height="315" src="https://www.youtube.com/embed/ybhXVSAdIRE" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen style="position: absolute; width:100%; height:100%;"></iframe>
</div>

결과는 다음과 같습니다. 웹브라우저 가로폭을 변경하면서 또는 모바일에서 접속해보세요.

상하 여백을 주고 싶다면 margin 속성을 추가합니다.

<div style="position: relative; height:0; padding-bottom: 56.25%; margin: 40px 0px;">
<iframe width="560" height="315" src="https://www.youtube.com/embed/ybhXVSAdIRE" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen style="position: absolute; width:100%; height:100%;"></iframe>
</div>

같은 카테고리의 다른 글

아마존 웹 서비스 AWS / 가입하는 방법

아마존 웹 서비스 AWS / 가입하는 방법

아마존 웹 서비스(AWS)에 가입하는 방법입니다. 별로 어려운 것은 없지만, 유료 서비스에 외국 사이트 프로세스라서 좀 어색한 점이 있습니다. 아마존 웹 서비스 AWS / 라이트세일(Lightsail) 인스턴스 생성하는 방법 아마존 웹 서비스 AWS / 라이트세일(Lightsail) / 우분투 서버에 PuTTY로 SSH 접속하는 방법 준비물 외화 결제 가능한 신용카드가 필요합니다. 연락 가능한 전화번호가 필요합니다. AWS 홈페이지 접속 AWS 홈페이지에 접속합니다. 오른쪽 위의 ...

Shutterstock / 무료 평가판 해지하는 방법

Shutterstock / 무료 평가판 해지하는 방법

Shutterstock은 사진이나 동영상을 구입하는 대표적인 사이트입니다. 미디어가 중요한 기업이나 프리랜서가 많이 가입합니다. 구입 방법은 건 당 사거나 연간 요금제에 가입하는 것인데, 건 당 요금보다 연간 요금제가 단가면에서는 많이 저렴합니다. 문제는 지속적으로 계약을 이어나가야 한다는 것이죠. 그래서 연간 요금제에 가입하기 꺼려집니다. 계속 사용할만한지 확인하고 싶다면 한 달 무료 평가판으로 가입하세요. Shutterstock 홈페이지에 ...

머티리얼 아이콘(Material icons) 웹폰트 - 구글이 제공하는 아이콘 폰트

머티리얼 아이콘(Material icons) 웹폰트 - 구글이 제공하는 아이콘 폰트

Material icons Material icons는 구글이 제공하는 아이콘 디자인 모음입니다. 800개가 넘는 아이콘이 있으며, 무료로 사용할 수 있습니다. Feel free to use, remix, and re-share the icons in your products. The icons are available under the CC-BY license. We'd love attribution in your app's "about" screen, but it's not required. The only thing ...

아마존 웹 서비스 AWS / 라이트세일(Lightsail) / 우분투 서버에 PuTTY로 SSH 접속하는 방법

아마존 웹 서비스 AWS / 라이트세일(Lightsail) / 우분투 서버에 PuTTY로 SSH 접속하는 방법

아마존 라이트세일에 우분투 서버를 만들었습니다. 관리는 SSH로 접속해서 하는데, 아마존에서 제공하는 웹용 SSH를 사용할 수도 있고, 다른 SSH Client 프로그램으로 접속하여 사용할 수 있습니다. 여기서는 PuTTY로 우분투 인스턴스에 접속하는 방법을 알아보겠습니다. SSH 키 다운로드 계정에서 SSH 키 메뉴로 갑니다. 키를 다운로드합니다. PuTTY, PuTTYgen 다운로드 PuTTY와 PuTTYgen을 다운로드합니다. 인스톨러에는 다 들어있습니다. 인스톨러가 싫다면 개별적으로 다운로드할 수 있습니다. SSH 키 ...

Google Ads / 공유 예산 설정하는 방법

Google Ads / 공유 예산 설정하는 방법

구글 애드(Google Ads)는 캠페인별로 하루 예산을 정할 수 있습니다. 하루 지출 가능한 금액을 정하는 것인데, 정확히 지키지는 않습니다. 월 평균으로 계산을 해서 예산보다 더 지출되는 경우도 있습니다. 예를 들어 하루 10,000원으로 정했다면, 월 300,000 한도로 지출을 하기에, 10,000보다 더 나가기도 합니다. 캠페인은 검색 캠페인과 디스플레이 캠페인으로 구분되는데, 한 가지 주제의 광고라 ...

메가존(호스팅케이알) 도메인 기간 연장하는 방법

메가존(호스팅케이알) 도메인 기간 연장하는 방법

도메인을 호스팅케이알에서 관리하고 있습니다. 10개 정도 있는데, 대부분 다른 곳에서 구입했던 것을 기관 이전했습니다. 이유는... 그냥 저렴하기 때문입니다. 서비스 품질은 거의 비슷하다고 생각하고 있습니다. 특별한 하자 없이 더 저렴한 곳이 있다면 또 옮기겠죠. 도메인은 1년 단위로 구입하고, 갱신하지 않으면 사라집니다. 그래서 계속 도메인을 사려면 꾸준히 갱신을 해줘야 하는데, 이번에 갱신하는 김에 ...

아마존 웹 서비스 AWS / 라이트세일(Lightsail) 인스턴스 생성하는 방법

아마존 웹 서비스 AWS / 라이트세일(Lightsail) 인스턴스 생성하는 방법

아마존 웹 서비스의 라이트세일은 저렴한 가상 서버입니다. 하지만 소규모 홈페이지를 만들고 운영하는 데는 충분한 자원을 제공합니다. AWS에서는 가상 서버를 인스턴스라고 부르는데, 라이트세일 인스턴스를 어떻게 만드는 지 알아보겠습니다. 라이트세일 페이지로 이동 콘솔에 접속한 다음 라이트세일 페이지로 이동합니다. 솔루션 구축에 있는 메뉴를 이용해도 되고... 서비스의 하위 메뉴에서 이동해도 됩니다. 직접 접속할 수 있는 주소는 https://lightsail.aws.amazon.com입니다. 인스턴스 생성 인스턴스 위치를 ...

네이버 웹마스터도구 / 소유 확인 갱신하는 방법

네이버 웹마스터도구 / 소유 확인 갱신하는 방법

홈페이지가 네이버에서 잘 검색되도로 하려면 네이버 웹마스터도구에 등록을 해야 합니다. 그리고 1년 마다 갱신을 해야 합니다. 만료일이 다가오면 다음과 같은 메일을 받게 됩니다. 네이버 웹마스터도구에 가면 라는 링크가 생깁니다. 링크를 클릭하고 안내에 따라 갱신합니다. 메타 태그를 삭제하지 않았다면 링크를 클릭하기만 해도 연장이 됩니다. 연장을 하지 않으면 검색에 불이익이 있을 수 있으니, 메일을 잘 확인하는 ...

블로그에 유튜브 동영상 반응형으로 삽입하는 방법

블로그에 유튜브 동영상 반응형으로 삽입하는 방법

유튜브 많은 정보가 있습니다. 구글이나 네이버보다 유튜브에서 검색을 먼저하는 사람도 많습니다. 그 동영상 콘텐츠들은 유튜브에서 소비되기도 하지만, 공유 기능을 통해서 여러 곳으로 퍼져나갑니다. 유튜브 크리에이터가 자신의 블로그에 동영상을 게재해서 홍보하기도 합니다. 유튜브의 동영상을 공유하는 기능은 유튜브에서 제공하고 있습니다. 영상 밑의 공유를 클릭하면 여러 가지 방식이 나옵니다. 워드프레스라면 https://www.youtube.com/embed/ybhXVSAdIRE 만 복사해서 붙여 넣으면 됩니다. 자동으로 ...

아마존 웹 서비스 AWS / 라이트세일(Lightsail) / 우분투 / root으로 키 없이 SSH 접속하는 방법

아마존 웹 서비스 라이트세일에서 우분투 서버를 만들면, SSH 접속은 KEY를 이용해서 합니다. 보안 상 좋은 방법이라 그렇게 하겠지만, root 계정에 익숙하거나 KEY 사용이 불편하다면 설정을 변경할 수 있습니다. 다음은 root 계정으로 KEY 없이 SSH 접속이 가능하도록 만드는 방법입니다. root 계정 비밀번호 설정 root 계정의 비밀번호를 만듭니다. sudo passwd root SSH 설정 수정 /etc/ssh/sshd_config에서 PermitRootLogin prohibit-password 를 다음과 ...