나의 IT Note

반응형 사이트나 모바일에서 유튜브 등의 동영상을 iframe으로 삽입할 경우 제공되는 소스를 그대로 넣으면 사이트가 어긋난다. 유튜브에서는 반응형을 지원하지 않기에 css로 처리를 해야한다. 동영상의 width는 100%, height는 0으로 설정하여 화면에서 보여지지 않게 한 후에 padding값을 조절하여 모바일 어느 기기에서도 width, height 둘 다 100%로 보여지게 한다. HTML CSS 화면의 비율에 따라 padding값을 다르게 줘야한다. 대부분이 56.25%이다. 화면 비율 21:9 일경우 9/21 = 0.42857140.4285714285714286‬% 16:9 일경우 9/16 = 0.5625% 4:3 일경우 3/4 = 0.75% .video-container { positio..