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

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

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

워드프레스라면

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>

같은 카테고리의 다른 글

네이버 웹마스터도구 / 'RSS 본문 크기를 줄여주세요' 해결하는 방법

네이버 웹마스터도구 / 'RSS 본문 크기를 줄여주세요' 해결하는 방법

오랜만에 네이버 웹마스터도구에 접속했습니다. 이상이 없나 살펴보던 중 제출한 RSS 주소에 문제가 있다고 나오더군요. 그래서 기존 RSS 주소를 삭제하고 다시 등록을 했는데 다음과 같은 에러가 났습니다. RSS 본문 크기를 줄여주세요 네이버 웹마스터도구를 수년 째 사용하고 있지만 처음 보는 에러입니다. 해결 방법은 뻔합니다. RSS에 출력되는 본문 크기를 줄여야 하죠. 워드프레스라면 에서 피드 ...

FileZilla / FTP 클라이언트 프로그램 파일질라 사용법

FileZilla / FTP 클라이언트 프로그램 파일질라 사용법

FileZilla FTP로 파일을 웹서버에 업로드하고 다운로드 받으려면 FTP 클라이언트 프로그램이 필요합니다. FTP 클라이언트 소프트웨어로 널리 사용되는 것은 파일질라(FileZilla)입니다. Open Source로 개발되는 거라 무료로 사용할 수 있고, 기능적으로도 좋은 평가를 받고 있습니다. 특히 SSH 프로토콜로 파일을 송수신할 수 있다는 장점이 있습니다. 서버에 접속하기 FileZilla를 다운로드 받아 설치하고 실행시킵니다. 호스트와 사용자명, 비밀번호, 포트에 정보를 입력하고 [빠른 ...

Subtle Patterns / 배경에 사용하기 좋은 패턴 이미지 구할 수 있는 사이트

Subtle Patterns / 배경에 사용하기 좋은 패턴 이미지 구할 수 있는 사이트

Subtle Patterns Subtle Patterns은 웹사이트 배경에 사용하기 좋은 패턴 이미지를 공유하는 사이트입니다. 현재 400개 이상의 패턴 이미지가 있으며, 무료로 다운로드 받을 수 있습니다. 개인적 용도뿐 아니라 상업적 사용이 가능하고, 홈페이지 템플릿에 포함하여 판매할 수도 있습니다. 조건은 HTML 또는 CSS 파일에 출처를 남기는 것입니다. CSS 파일이라면 다음 코드를 추가하면 됩니다. /* Background pattern from Subtle ...

머티리얼 아이콘(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) / 우분투 / root으로 키 없이 SSH 접속하는 방법

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

무료 Bootstrap 테마(theme), 템플릿(template) 다운로드 사이트 3군데

무료 Bootstrap 테마(theme), 템플릿(template) 다운로드 사이트 3군데

Bootstrap는 널리 사용되는 front-end framework입니다. 반응형 웹디자인을 기본으로 하고 있고, 폼 디자인, 메뉴바, 드롭다운 등 자주 사용되지만 손이 많이 가는 요소들의 디자인과 기능을 포함하고 있어 쉽게 사이트를 제작할 수 있습니다. 하지만, Bootstrap 기본 모양을 사용하면 모든 사이트가 같은 디자인이 된다는 단점이 있습니다. 그래서 어느 정도 수정을 해야 차별화된 모습을 갖출 수 ...

Noun Project 사용법과 저작권

Noun Project 사용법과 저작권

Noun Project Flat Icon이 유행인 시대입니다. 좋은 아이콘을 찾다가 Noun Project라는 곳을 알게 되었습니다. Noun Project는 2백만 개 이상의 아이콘이 있는 사이트입니다. 사용 조건은, 무료로 사용하고 싶으면 출처를 밝히고, 출처를 밝히기 싫다면 구입하는 것입니다. 아이콘을 어떻게 얻을 수 있는지 간략히 알아보겠습니다. 회원 가입 아이콘을 무료로 사용하든 유료로 사용하든 회원 가입은 필수입니다. 무료 사용을 위한 다운로드도 회원만 ...

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

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

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

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

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

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

다음 스마트 워크로 내 도메인 메일 주소 만드는 방법

다음 스마트 워크로 내 도메인 메일 주소 만드는 방법

도메인을 구입하고, 그 도메인으로 홈페이지나 블로그를 만들면, 메일 주소가 신경쓰이기 시작합니다. 예를 들어 도메인이 cmsfactory.net인데 대표 이메일 주소가 abc@gmail.com이라면 뭔가 없어 보이죠. admin@cmsfactory.net 같은 메일 주소가 탐나기 시작합니다. 구입한 도메인으로 메일 주소를 만들기 위해서는 메일 서버를 구축하거나 유료 서비스를 이용해야 하는데, 다음의 Daum 스마트 워크를 이용하면 비용을 들이지 않고 쉽게 만들 ...