비밀번호를 잊어버리셨나요?

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

woobi2019.08.14 10:16조회 수 61댓글 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" 보여질 유튜브창의 세로 값을 너무 작지 않게 입력한다.

    • 글자 크기
html5 태그 정리 (by woobi)

댓글 달기 WYSIWYG 사용

글쓴이 비밀번호
유튜브의 영상을 블로그에 올릴 때 유튜브에서 제공하는 iframe 태그로만 적용하면 본문에 고정 크기로 적용되어 작은 창의 브라우저나 모바일에서 짤리는 현상이 생긴다. width 값을 %로 변경하면 간단하게 해결 가능하다. 원하는 영상의 공유 버튼을 클릭한다. 공유버튼을 누른후 퍼가기를 클릭한다. 빨간창안의 iframe ...
woobi
2019.08.14 조회 61
<!-- ★텍스트 태그 <h1~6> 제목 태그 </h1~6> <p>단락 태그 </p> <br> 줄바꿈 <hr> 가로 줄 생김 <blockquote> 인용 문구 작게 삽입 </blockquote> <q> "표로 단락안에 인용문구 표시 </q> <pre> 입력한 그대로 화면 표시 </pre> <strong> 굵게 강조할 텍스트 </strong> <b> 굵게 표시할 텍스트 </b> strong 는 내용도 중요 ...
woobi
2019.03.15 조회 151
첨부 (3)
1.jpg
206.4KB / Download 0
2.jpg
167.8KB / Download 0
3.jpg
199.1KB / Download 0