aspect-ratio1 유튜브 임베드 최적화 (반응형, CLS 방지, Facade 패턴) 유튜브 퍼가기 버튼을 누르고 코드를 그대로 붙여넣었다가 낭패를 본 적 있으신가요. 모바일에서 확인해보면 영상이 화면 밖으로 삐져나와 있는 상황, 저도 블로그를 시작하고 꽤 오랫동안 겪었습니다. 처음에는 단순히 보기 나쁜 문제라고 생각했는데, 파고들수록 그게 성능 지표와 검색 순위에까지 연결되는 문제라는 걸 알게 됐습니다.반응형 임베드와 aspect-ratio: 코드 절반으로 같은 효과를유튜브가 제공하는 기본 퍼가기 코드는 width="560" height="315"처럼 픽셀 단위 고정 크기로 되어 있습니다. 데스크톱에서는 문제없어 보이지만, 모바일 화면에서는 이 숫자가 그대로 적용되면서 iframe이 뷰포트를 벗어납니다. 제가 처음에 꺼낸 해결책은 max-width: 100%를 붙이는 것이었는데, 솔직히.. 2026. 6. 18. 이전 1 다음
