【카피페로 OK】Youtube 동영상 매립을 리스폰시브 대응시키는 방법!

YouTube의 동영상 매립을 리스폰시브 대응시키고 싶다
YouTube에서는 동영상을 다른 사이트에 매립을 실현하는 기능이 있습니다.

매립을 할 때 iframe 태그가 발행되므로 그대로 사이트의 html 안에 채워넣으면 동영상 매립이 가능합니다.
YouTube의 동영상 매립의 예로서 다음과 같습니다.매립의 html 태그(iframe 태그)와 그 결과가 됩니다.

그러나 매립 동영상의 가로폭이나 높이는 iframe 태그의 width나 height를 바꾸는 것으로 대응할 수 있습니다만, 가로 세로 비율이 무너지거나 브라우저의 윈도우 사이즈가 바뀌었을 경우에 대응하고 있지 않습니다(즉 리스폰시브 지원하지 않는다).

사이트에 따라서는 PC 사이트·스마트폰 사이트나 윈도우 사이즈를 바꾸었을 때에도 가로세로비·레이아웃 등 무너지지 않고 표시시키고 싶은 요구가 있을 것으로 생각합니다.

그래서 이번에는 YouTube의 동영상 매립을 리스폰시브 대응시키는 방법을 소개해 드리겠습니다.
유튜브 동영상 매립을 리스폰시브 대응 방법
그럼 YouTube의 동영상 매립을 리스폰시브 대응시키는 방법을 소개해 드리겠습니다.

Youtube는 16:9의 가로세로비로 동영상을 보여주지만 html와 css를 변경하여 리스폰시브할 수 있습니다.아래 코드를 복사하여 [Youtube 동영상 ID] 부분에 채우고 싶은 Youtube 동영상 ID를 넣어 시도해 보세요.

상기 html 안에 Youtube 동영상 매립 코드를 쓰면 가로세로비를 유지한 채 리스폰시브할 수 있습니다.
어떨까요?이 동영상은 브라우저의 윈도우 사이즈를 줄여보세요.리스폰시브에(가로세로비를 유지한채) 똑같이 동영상도 사이즈가 축소될거라고 생각합니다.
유튜브 동영상 매립을 리스폰시브 대응 방법
위의 html를 복사해서 [Youtube 동영상 아이디] 부분을 채워넣고 싶은 Youtube 동영상 아이디로 하자
정리
어떠셨는지요?html를 조금 바꾸는 것만으로, Youtube의 동영상 매립은 리스폰시브에 대응시킬 수 있습니다.

꼭 이 기사의 html를 복사해서 Youtube의 매립 동영상의 리스폰시브(lesponseube)를 실현해 보세요.
(기타 Youtube의 매립 옵션에 대해서는 적절히 설정해 주십시오)

특히 PC사이트/스마트폰사이트에 YouTube의 동영상을 넣고 있는데 레이아웃이 무너져 어려움을 겪고 계신 분들은 꼭 시도해 보시기 바랍니다.