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

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

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

워드프레스라면

만 복사해서 붙여 넣으면 됩니다. 자동으로 영상을 보여주기는 하지만, 고정 크기로 삽입됩니다.

만약 본문에 꽉 차고 반응형으로 변하도록 넣고 싶다면 수작업을 거쳐야 합니다. 퍼가기를 클릭하고...

기다란 코드를 복사합니다.

아래처럼 생긴 코드인데...

다음처럼 div 태그로 감싸고 iframe에 style 속성을 추가합니다.

결과는 다음과 같습니다. 웹브라우저 가로폭을 변경하면서 또는 모바일에서 접속해보세요.

이 방식은 티스토리에도 적용 가능합니다.