https://www.woobi.net/files/attach/images/601/99b983892094b5c6d2fc3736e15da7d1.png

유튜브(YouTube) 영상 반응형으로 블로그에 삽입하기

woobi 2019.08.14 조회 수 119 추천 수 0

 

 유튜브의 영상을 블로그에 올릴 때 유튜브에서 제공하는 iframe 태그로만 적용하면

 본문에 고정 크기로 적용되어 작은 창의 브라우저나 모바일에서 짤리는 현상이 생긴다.

 width 값을 %로 변경하면 간단하게 해결 가능하다.

 

1.jpg

원하는 영상의 공유 버튼을 클릭한다.

 

2.jpg

 공유버튼을 누른후 퍼가기를 클릭한다.

 

3.jpg

빨간창안의 iframe 태그를 복사한다.

 

복사한 iframe 태그 에서 width 값을 다음과 같이 %로 변경한다.

 

===================================================

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

===================================================

 

width="100%" 본문 너비를 100%로 보고 원하는 값을 입력하면 된다.

height="500" 보여질 유튜브창의 세로 값을 너무 작지 않게 입력한다.

Profile

0개의 댓글

Profile
에디터
  • woobi 2020.07.02 조회 42

    구글 계정의 캘린더에 저장된 일정을 새로운 핸드폰이나 기기에서 동기화를 하면 1년까지만 동기화가 되고 1년 전의 일정은 새기기에서 보이지 않는다. 저장된 전체 일정의 동기화는 구글 캘린더의 설정에서 내보내기...

  • woobi 2020.02.10 조회 106

    1. 구글드라이브의 공유링크를 다음과 같이 설정하여 복사한다. 1-1)복사한 링크주소: https://drive.google.com/file/d/1RCaYb9AAAAkC6vGwl0Fa5OsXoTvAi/view?usp=sharing 2. 복사한 다운로드 링크의 공유ID(빨간밑...

  • woobi 2019.08.14 조회 119

    유튜브의 영상을 블로그에 올릴 때 유튜브에서 제공하는 iframe 태그로만 적용하면 본문에 고정 크기로 적용되어 작은 창의 브라우저나 모바일에서 짤리는 현상이 생긴다. width 값을 %로 변경하면 간단하게 해결 가...

  • woobi 2019.03.15 조회 378

    <!-- ★텍스트 태그 <h1~6> 제목 태그 </h1~6> <p>단락 태그 </p> <br> 줄바꿈 <hr> 가로 줄 생김 <blockquote> 인용 문구 작게 삽입 </blockquote> <q> "표로 단락안에 인용문구 표시 </q> <pre> 입력한 그대로 화면 ...