[티스토리/꿀팁] 유튜브 동영상 반응형으로 삽입하기

반응형(반응형 웹)이란?

반응형 웹이란 HTML5의 “미디어 쿼리”를 이용하여 하나의 소스로 제작된 컨텐츠가 데스크탑에만 국한되지 않고 타블렛 PC, 모바일 폰 등 다양한 크기의 디바이스 환경에 맞추어 해상도나 화면이 동적으로 변환되는 기법을 말한다.

 

한마디로 웹 또는 기기의 사이즈에 맞춰서 컨텐츠의 크기를 자동으로 조절하고 싶을때 사용하는 방법입니다.

2019.07 현재 유튜브에서 제공하는 iframe퍼가기 소스는 반응형이 아닌지라 html로 가져왔을때 영상크기가 고정되어버리는 현상이 있습니다.

 

<단순히 iframe으로 가져왔을경우 : 1080px x 608px >

<iframe을 반응형으로 수정한 후 : 1080px x 608px >

현재로썬 iframe태그를 약간 변경해주어야 합니다

 

방법1

아래의 코드에서 iframe소스만 추가해서 사용

 

 

 

방법2

iframe태그의 style부분을 직접 수정

(★ 빼고 적용하면 됩니다)

<★div style="position: relative; height: 0px; padding-bottom: 56.25%; text-align: left;">
<★iframe style="position: absolute; width:100%; height:100%;" src="링크" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="">
<★/div>

 

* 영상사이즈를 본문에 꽉차게 하고 싶지 않다면 width:100%; height:100%; 의 퍼센트값을 수정해주세요