https://www.woobi.net/files/attach/images/601/38391a14ec93b25a855576ce908659df.png

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

woobi 2019.08.14 조회 수 99 추천 수 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 7 일 전 조회 7

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

  • woobi 2019.08.14 조회 99

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

  • woobi 2019.03.15 조회 183

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

서버에 요청 중입니다. 잠시만 기다려 주십시오...